Design
Gradient generator
Build linear and radial CSS gradients visually.
CSS
background: linear-gradient(90deg, #3366cc 0%, #cc33aa 100%);How it works
1
Add color stops
Choose two or more colors and position them along the gradient.
2
Shape it
Switch between linear and radial, and set the angle or centre.
3
Copy the CSS
Copy the ready-to-use background gradient into your stylesheet.
Frequent questions
Does it output ready-to-use CSS?
Yes. The tool generates a complete background gradient value you can paste straight into your CSS.
Can I use more than two colors?
Yes. Add as many color stops as you like and position each one along the gradient.
Explore more tools
Colors
Convert colors between HEX, RGB and HSL.
Contrast checker
Check color contrast against WCAG AA/AAA.
Palette generator
Harmonies, tints and shades from a base color.
Color mixer
Blend two colors and get the steps between.
Blob generator
Generate organic SVG blob shapes.
Color theme maker
Build a light/dark theme and export CSS variables.
Palette from image
Extract dominant colors from an image.
Color blindness simulator
Preview colors for different vision types.