CSS and design
CSS Gradient Generator
Design CSS gradients visually and copy code that works in every modern browser.
- Runs in your browser
- Instant results
- Free, no sign-up
Loading the tool…
How to use the CSS Gradient Generator
- Choose the gradient type and angle.
- Adjust, add or remove color stops, or pick a preset.
- Copy the CSS.
Frequently asked questions
Why is there a solid background line too?
It is a fallback color for very old browsers and for tools that ignore gradients.
What is a conic gradient?
Colors rotate around a center point, like a color wheel or pie chart.
Can I use gradients on text?
Yes. Set the gradient as background, then add background-clip: text and color: transparent.