Free · No sign-up · Runs in your browser
CSS Gradient Generator
Design linear and radial gradients with a live preview, then copy production-ready CSS.
Presets
background: #FF1654;
background: linear-gradient(135deg, #FF1654, #6C63FF);How it works
How to use the CSS Gradient Generator
- 1
Pick two colours, or start from one of the presets.
- 2
Choose linear or radial and set the angle.
- 3
Copy the CSS and paste it into your stylesheet.
FAQ
Frequently asked questions
Do CSS gradients work in all browsers?
Yes. linear-gradient() and radial-gradient() are supported by every modern browser without vendor prefixes.
Are gradients better than background images?
Usually. A CSS gradient is a few bytes of code, scales to any screen size and never needs an extra download, so pages load faster.
How do I add a gradient to text?
Set the gradient as background, then add background-clip: text and color: transparent to the text element.
Keep going