CSS Gradient Generator
Generate CSS gradients with a visual editor.
Direction
CSS:
Advertisement
Create beautiful CSS gradients visually. Adjust colors and angles, then copy the CSS code generated client-side.
How to use it
- Choose a direction, or switch to a radial gradient.
- Set your colours and add more stops if you need them.
- Copy the generated CSS straight into your stylesheet.
Frequently asked questions
Which CSS does it produce?
Standard linear-gradient() and radial-gradient() values, supported by every current browser without a prefix.
How many colours can I use?
As many as you want, but two or three usually look best. Long chains of stops tend to turn muddy where the hues cross.
Why does my gradient look grey in the middle?
Two opposite hues meet through a desaturated midpoint. Pick colours that sit closer together on the colour wheel, or add a stop to steer the transition.