Blend colors, keep the code.
Add stops, set the angle, switch between linear and radial, then copy the CSS straight into your project.
Gradient CSS is generated in the browser. Nothing is uploaded.
What it does
About the Gradient Generator.
A CSS gradient generator builds linear or radial gradients from color stops and direction, then copies a background value you can paste into CSS.
Hero washes, chart fills, and subtle surface sheens all start as a few stops. Keep contrast in mind: text on a gradient still has to pass WCAG against the lightest and darkest regions it sits on.
How to use
Three steps.
Set
Choose linear or radial, then set the angle or position.
Read
Add or move color stops until the blend matches the mockup.
Copy
Copy the CSS background (or background-image) rule into your project.
When to use it
Where it helps.
Use it for marketing heroes, empty states, and brand moments. Prefer tokens for product chrome so every screen does not invent a new wash.
FAQ
FAQ.
What kinds of gradients can I make?
You can build linear and radial gradients with multiple stops, then copy the CSS function into a background property.
How do I copy the CSS?
Copy the generated linear-gradient or radial-gradient string and paste it as background or background-image.
Will text still pass contrast on a gradient?
Not automatically. Check the text color against the lightest and darkest parts of the wash with the Contrast Checker on this site.
Is the gradient uploaded?
No. Stops and the CSS string are handled in your browser.
More tools