Free tool
CSS Gradient Generator With Stops, Presets and Tailwind Output
Choose a type, set the stops, watch the preview change, and copy the code. It writes plain CSS or a Tailwind class, so the result drops straight into a stylesheet or a utility-class build.
Colour stops
Type a HEX code with two more digits for see-through, like #7c52ff80, or transparent.
Presets
The gradient is built in your browser and nothing is sent anywhere. Your last design is kept on this device only, and the share link holds the design inside the address.
From a preview you like to a line you can paste
A hero panel, a button, a card edge or a page background often starts with a gradient that looks right in a design file. Turning it into CSS by hand means guessing angles and percentages. Here you adjust the controls on screen and the code box underneath always shows what the preview is using.
Press Copy code to take the line. Copy link gives you a web address that reopens the same design, handy for sending a gradient to a developer or a client without a screenshot.
Linear, radial and conic
| Type | Controls | Looks like |
|---|---|---|
| Linear | Angle | Colour moves along a straight line |
| Radial | Shape (circle or ellipse), centre | Colour spreads out from a point |
| Conic | Angle, centre | Colour sweeps around a point, like a colour wheel |
The Centre menu offers Middle, the four sides and the four corners, so a glow can sit in the top right of a section without you writing the position by hand.
Working with colour stops
Each colour stop has a colour and a position from 0 to 100 percent. Type the colour or use the picker, then type a position or slide it. Add a colour adds a stop, Reverse flips the order, Random makes a new set to look at, and Start again returns to the default.
You can type a HEX code with two extra digits for see-through, such as the six digit code followed by 80, or write the word transparent. See-through stops let a gradient fade into whatever sits behind it, which is how most image overlays are made.
- Two stops give a simple blend.
- Three or more give richer movement, but keep neighbours at least a few percent apart.
- Two stops at the same position give a hard edge, useful for stripes.
CSS, Tailwind and a fallback
Code as CSS writes a background declaration. Code as a Tailwind class writes an arbitrary value class, with spaces turned into underscores, which is how Tailwind reads values with spaces in them. The Solid colour first, as a fallback option adds a plain background colour ahead of the gradient, so a very old browser still shows something sensible. That option only applies to CSS output.
Gradients are drawn in your visitor's browser and add no image file to download. That is one reason designers reach for them over large background pictures. Our guide to website speed for small sites covers other ways to keep a page light.
Gradient choices that look worse than expected
- Muddy middles. Blending two opposite colours can pass through a dull grey. Add a middle stop that you choose yourself.
- Text on a moving background. Check contrast at the lightest and darkest point behind the words, not just at one spot.
- Banding. Very subtle gradients on large areas can show faint steps on some screens. A little more colour difference or a second layer helps.
- Ignoring dark mode. A gradient made for a white page may glare on a dark one.
The presets are a quick way to see what well-spaced stops look like before you change them.
Where gradients earn their place
A gradient does a job when it guides the eye. A soft one behind a headline lifts the text off the page. A stronger one inside a button marks it as the thing to press. A conic one makes a loading ring or a simple chart. Choose the job first and the settings follow.
- For a section background, keep the stops close in lightness so text stays readable.
- For an overlay on a photo, use a see-through stop at one end so the picture shows through.
- For a border or underline, use a thin element with a bold linear gradient at a right angle.
Paste the result into your stylesheet, then test it at phone width, where the same angle can look quite different on a tall, narrow box.
Frequently asked questions
How do I make a CSS gradient?
Pick a type, set two or more colour stops, adjust the angle or centre, and copy the code. The preview shows exactly what the code will draw.
Can I use a Tailwind class instead of CSS?
Yes. Choose Code as a Tailwind class and you get an arbitrary value class you can paste into your markup.
How do I make a gradient fade to transparent?
Type the word transparent as a stop colour, or add two extra digits to a HEX code to set its see-through level.
What does the fallback option do?
It writes a solid colour before the gradient, so a browser that cannot draw the gradient still shows a colour. It applies to the CSS output.
What is a conic gradient?
It sweeps colours around a centre point instead of along a line or outward from a point. It is used for colour wheels, pie-like shapes and spotlight effects.
Can I share a gradient with someone?
Yes. Copy link makes an address that reopens the same gradient for them.
More free tools
- Gradient background maker: Create gradient background pictures with mesh, linear or radial styles, grain and set or custom sizes.
- Box shadow generator: Build layered CSS box shadows with presets, Tailwind sizes and copy-ready CSS or a Tailwind class.
- Colour palette generator: Generate website colour palettes by harmony, check text contrast, and export CSS, Tailwind, SVG or PNG.
- Lighten and darken colour tool: Lighten or darken a colour, build 50 to 950 scales, and copy them as CSS, Tailwind, SCSS or JSON.
- Color contrast checker: Test colours against WCAG 2.2, fix them, check a palette and share a link.