~/css/gradient-generator
CSS Gradient Generator
Design a CSS gradient visually: choose linear, radial or conic, set the angle, pick up to four colours with their stop positions, and copy the finished background rule. Everything runs in your browser.
Colour stops
Using the CSS Gradient Generator
Linear, radial or conic?
A linear gradient blends along a straight line at the angle you choose, the usual pick for buttons and hero backgrounds. A radial gradient spreads out from a centre point, good for spotlights and soft glows. A conic gradient sweeps colours around a centre like the hands of a clock, the basis for pie charts and colour wheels.
Colour stops
Each stop is a colour plus a position along the gradient, from 0% to 100%. Two stops at the same position make a hard edge instead of a blend, which is how you get stripes. Stops close together blend quickly; stops far apart blend slowly.
Avoiding muddy middles
Blending two colours from opposite sides of the colour wheel, such as blue and orange, can pass through a dull grey in the middle. Add a third stop with a brighter in-between colour, or pick colours that sit closer together, to keep the blend vivid.
A solid fallback first
The generated CSS declares a plain background colour before the gradient. Very old browsers ignore the gradient line and keep the solid colour, so text placed on top stays readable everywhere.
Frequently asked questions
Is the gradient generator free?
Yes, free with no sign-up. It runs entirely in your browser and nothing you make is uploaded.
Does the CSS work in all browsers?
Linear and radial gradients work in every current browser. Conic gradients work in all current versions of Chrome, Edge, Firefox and Safari.
Can I use the gradient on text?
Yes. Use the gradient text generator, which clips a gradient to the letters with background-clip: text and adds a readable fallback colour.