CSS Gradient Generator
Preview CSS gradients live while adjusting the angle, colour stops and type — linear, radial or conic — then copy the background rule in one click.
Runs in your browser: input and output are never sent to the server, and the platform does not store your input.
Output
Fill in the fields on the left, then run.
How to use
- 1Choose the gradient type.
- 2Adjust the angle and colour stops.
- 3Copy the CSS into your stylesheet.
FAQ
How is the angle measured?
Per the CSS spec: 0deg points upwards, 90deg points right, increasing clockwise.
Can I use more than two colours?
Yes — enable the third stop, and add further stops directly in the copied CSS.
Which browsers support this?
linear and radial gradients are broadly supported; conic-gradient may need a fallback colour in older browsers.