CSS Gradient Generator
Design linear and radial gradients visually and copy the CSS.
- 100% free
- Live preview
- Up to five colours
Last reviewed by the OnlineToolPro team
Type
135°
0%
100%
What is the CSS Gradient Generator?
Build a CSS gradient with up to five colours, adjust the angle and each colour's position, and see it change live. The code includes a solid fallback colour.
How it works
How to use the CSS Gradient Generator
3 simple steps. No experience needed.
What can you use it for?
- Create a background for a hero section or button.
- Match a gradient from a design mock-up.
- Experiment with colour combinations.
FAQ
Frequently asked questions
Why is there a solid colour first?
It's a fallback for the rare browser that can't draw gradients.
Related tools
Other tools you might find useful next.
More CSS Tools
Generate and tidy up CSS with live previews. 4 free tools.