Home / Design / Gradient Generator
Gradient Generator
Build linear, radial or conic gradients with as many colour stops as you like, then copy the CSS.
Tip: gradients look smoother when neighbouring colours are close in hue — if the middle turns muddy grey, add a stop with a brighter mid-tone. Every browser in use today supports these gradients without prefixes.
About the Gradient Generator
The CSS Gradient Generator builds linear, radial and conic gradients with as many colour stops as you like. Click the bar to add stops, drag to move them, set each colour’s opacity, start from presets and copy the finished CSS. Gradients add depth to backgrounds, buttons and hero sections without any images.
How to use the Gradient Generator
- Choose linear, radial or conic.
- Set the angle or centre.
- Click the bar to add colour stops, drag them and set colours and opacity.
- Copy the CSS.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
Linear gradients blend along a straight line, radial gradients spread out from a centre point, and conic gradients sweep around a centre like a colour wheel.
Do CSS gradients work in all browsers?
Yes. Linear, radial and conic gradients are supported in all modern browsers.
Are CSS gradients better than images?
Usually. They load instantly, scale to any size without blurring and are easy to change.