A CSS gradient blends two or more colors along a line (linear-gradient) or outward from a center point (radial-gradient). Each color stop sets a color and the percentage position along that gradient where it should appear.
Adjust the type, angle and stops to preview the result live, then copy the generated background CSS directly into your stylesheet.
What's the difference between linear and radial gradients?
A linear gradient blends colors along a straight line at a chosen angle; a radial gradient blends them outward from a center point in a circle.
How many color stops can I add?
Up to 8, with a minimum of 2 — enough for most real-world gradients without cluttering the UI.
Can I use this gradient as a background image instead of a solid background?
Yes — the generated value is a valid CSS gradient function, so you can drop it into background, background-image, or anywhere else a CSS <image> value is accepted.