CSS gradient generator
Design a linear or radial gradient and copy the CSS.
In your browser
Colour stops
CSS
About this tool
Create CSS gradients visually. Pick the type and angle, add colour stops and copy the background code.
How to use it
- 1 Choose linear, radial or conic.
- 2 Set the angle and colour stops.
- 3 Copy the CSS.
Questions
Is my data uploaded?
No. This tool runs in your browser, so your text and files never reach our server.
Is this tool free?
Yes. It’s free to use with no sign-up and no limits for normal use.
More in Colour & design
- Box shadow generator New Tune a CSS box shadow visually and copy the code.
- Color palette generator New Build a harmonious colour palette from one base colour.
- Contrast checker New Check whether text and background colours meet WCAG accessibility contrast levels.
- Color converter Convert a colour between HEX, RGB, HSL and CMYK.
- Color picker Pick any colour, from a palette, the screen, or an uploaded image, and get HEX, RGB and HSL.