How to use the css gradient generator
- Choose linear, radial or conic.
- Pick two or three colours and set the angle.
- Copy the CSS into your stylesheet.
Gradient types
- Linear blends along a straight line at the angle you choose.
- Radial spreads out from the centre as a circle or ellipse.
- Conic sweeps around the centre like a colour wheel.
The first line of the CSS is a plain background colour for very old browsers.
Examples
background: linear-gradient(135deg, #4f46e5, #ec4899);
background: radial-gradient(circle, …);