CSS Gradient Generator
Design linear and radial gradients and copy the CSS.
Loading tool…How to use it
- 1Pick linear or radial.
- 2Choose colours and drag their positions.
- 3Set the angle for linear gradients.
- 4Copy the CSS.
FAQs
Does the CSS work in all browsers?
Yes. linear-gradient and radial-gradient work in every modern browser without prefixes.
How many colours can I add?
Up to six colour stops.
Is anything sent to a server?
No. Everything is calculated in your browser, so it works instantly and nothing you enter is stored.
Related tools
Colour Palette Generator
Build matching colour palettes from one colour: analogous, complementary and more.
Open toolRGB to HEX Converter
Turn RGB values into HEX colour codes for CSS and design tools.
Open toolStrong Password Generator
Create strong, random passwords with your choice of length and characters.
Open toolRandom Number Generator
Pick random numbers in any range, with or without repeats.
Open tool