The free CSS Gradient Generator
Design beautiful CSS gradients visually. Linear, radial and conic types, up to four colour stops, live preview and copy-ready CSS code.
- Free to use
- No signup
- Nothing to install
- Runs in your browser
background: #4f46e5; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);Open the CSS Gradient Generator
Illustration. Open the tool for the real thing.
What is the CSS Gradient Generator?
A CSS gradient is a smooth transition between two or more colours, drawn by the browser instead of loaded as an image. Gradients make backgrounds, buttons and cards look modern while keeping pages fast, because they are just a line of code. This generator lets you design them visually and copy the CSS.
Choose linear, radial or conic, set the angle or position, pick up to four colours with their stop positions and watch the live preview update. The tool outputs ready-to-paste CSS, including a plain fallback colour, so you can drop it straight into your stylesheet, Tailwind config or design tool.
3 steps to your result
Open the tool and follow along. Nothing to install.
What you get
Linear, radial and conic with live preview.
Each with its own position.
Includes a fallback background colour.
One click generates a fresh combination.
AZRS tools are free to open and use.
It opens in your browser, so there is nothing to download.
Used for
Pick one to see how it fits.
How it compares
A plain look at this tool next to the usual alternative.
| This utility | Desktop software | |
|---|---|---|
| Install | Nothing to install | Usually an app or program to install |
| Account | No signup | Depends on the product |
| Cost | Free to use | Free or paid, depends on the product |
| Where it runs | In your browser tab | On your computer |
Questions people ask
What is a CSS gradient?
A background image generated by the browser that transitions between colours.
What is the difference between linear and radial?
Linear runs along a line at an angle; radial spreads out from a centre point.
What is a conic gradient?
Colours rotate around a centre point, like a colour wheel or pie chart.
Does it work in all browsers?
Yes in all modern browsers; include the fallback for very old ones.
Can I use gradients on text?
Yes, with background-clip: text.
More free tools
Related to the CSS Gradient Generator.
Try the CSS Gradient Generator now
Create linear, radial and conic gradients with CSS code. Free to use.
Try it free