Color & Design
Gradient Generator
Blend two colors into a gradient, adjust the angle and shape, and copy the CSS when the preview looks right.
Good to know
Frequently asked questions
Where do I paste the CSS?
Into the background property of the element you want to style, for example .hero { background: linear-gradient(...); }.
Why does my gradient look banded?
Very close colors over a large area can band on some screens. Adding a slight hue difference or a subtle noise overlay usually fixes it.
Do gradients work everywhere?
Linear and radial CSS gradients are supported in every modern browser without prefixes.
Can I use more than two colors?
Yes — use the CSS Gradient Generator, which supports multiple stops and conic gradients.