CSS Gradient Generator
Create smooth linear, radial and conic gradients and copy the CSS.
How to use: Pick a gradient type, set the colours and their positions, adjust the angle, then press Copy to use the CSS on your site.
Colour stops
Presets
How to use the CSS Gradient Generator
Gradients add depth and colour to buttons, hero sections, cards and backgrounds without loading a single image, which keeps pages fast. Writing the CSS by hand is fiddly, so this generator lets you design visually and copy clean code.
Start with the type. Linear gradients blend along a straight line at the angle you choose: 90 degrees runs left to right and 180 runs top to bottom. Radial gradients spread outward from a centre point as a circle or ellipse, which works well for spotlights and soft glows. Conic gradients sweep around a point like a colour wheel or pie chart.
Each colour stop has a colour picker, a HEX box and a position slider from 0 to 100 percent. Add up to six stops for rainbow or multi-tone effects, and remove stops with the cross. Placing two stops close together creates a sharp edge instead of a soft blend. Try the presets for popular combinations, or press Random for inspiration.
The CSS includes a solid fallback colour first, followed by the gradient, so very old browsers still show something sensible. Paste it into any rule, for example on a button or the body element, and check that text on top keeps enough contrast.
Frequently asked questions
Do CSS gradients work in all browsers?
Linear and radial gradients work in every modern browser. Conic gradients are supported by all current versions of Chrome, Edge, Firefox and Safari.
Are gradients better than background images?
For simple colour blends, yes: they need no download, scale perfectly and are easy to change.
How do I make a hard colour line?
Give two neighbouring stops the same position, for example 50% and 50%.