Pick the gradient type
Choose linear, radial or conic, and set the angle for linear and conic gradients.
CSS Gradient Generator
Build linear, radial or conic CSS gradients with up to six colour stops and copy the code.
Free
No sign-up
Runs in your browser
Colour stops
The first stop is added as a solid fallback colour.
Need matching colours? Use the Color Palette Generator.Common uses
- Create a hero or button background
- Try colour combinations before adding them to a design
- Get gradient code without writing it by hand
How it works
How to use CSS Gradient Generator
Set the colour stops
Choose up to six colours and drag each position slider. The preview updates as you go.
Copy the CSS
Copy the background rule. It includes a solid fallback colour for very old browsers.
FAQ
Good to know
How do I use CSS Gradient Generator?
1. Pick the gradient type: Choose linear, radial or conic, and set the angle for linear and conic gradients. 2. Set the colour stops: Choose up to six colours and drag each position slider. The preview updates as you go. 3. Copy the CSS: Copy the background rule. It includes a solid fallback colour for very old browsers.
Which browsers support these gradients?
Linear, radial and conic gradients work in all current versions of Chrome, Edge, Firefox and Safari.
Why is there a second background line?
The first line is a solid colour that browsers without gradient support use instead.
Can I use the code commercially?
Yes. The generated CSS is yours to use in any project.