How to make a CSS gradient

Build a linear, radial or conic gradient and copy the CSS.

3 steps · about 2 min

Pick a type and a preset
Choose Linear, Radial or Conic, then click a preset to start from. For linear and conic gradients, the Angle slider sets the direction.
The gradient generator with a large preview, type buttons, presets, color stops and the CSS output
Edit the color stops
Each stop has a color and a position. Change the color with the swatch or the HEX box and slide the position from 0 to 100%. Add stop adds another, and the bin removes one (a gradient keeps at least two).
Copy the CSS
The CSS box at the bottom shows a solid-color fallback and the gradient. Copy CSS puts it on your clipboard, ready to paste into a stylesheet.

Tips

Gradients between very different hues can look muddy in the middle; add a stop with a related color to steer them.