Design a gradient visually and copy the CSS. Pick linear, radial or conic, drag the angle, add up to eight color stops, or start from a preset. The code updates as you edit.
A CSS gradient is an image generated by the browser, so it is resolution-independent, loads instantly and costs no extra request. You use it anywhere an image is accepted, most often as background or background-image. Each gradient is a list of color stops, and the browser blends smoothly between neighbours.
| Type | Behaviour | Typical use |
|---|---|---|
| linear-gradient | Colors change along a straight line set by an angle; 0deg points up and 90deg points right | Page and card backgrounds, buttons |
| radial-gradient | Colors spread outward from a center as a circle or ellipse | Spotlights, soft glows, vignettes |
| conic-gradient | Colors sweep around a center point like a color wheel | Pie charts, dials, decorative rings |
How do I use the generated code? Paste the lines inside any CSS rule, for example .hero { ... }. The first line is a solid fallback and the second is the gradient itself.
What does the angle mean in a linear gradient? It sets the direction the colors travel. 0deg goes from bottom to top, 90deg from left to right, 180deg from top to bottom and 135deg diagonally from top left to bottom right.
How many color stops can I add? This tool supports up to eight stops, which is enough for most designs. CSS itself allows many more.
Do gradients work in all browsers? Linear and radial gradients are supported everywhere. Conic gradients work in all current major browsers but not in very old ones, so keep the fallback line.
Can I make a hard-edged stripe instead of a smooth blend? Yes. Add two stops with different colors at the same position, and the browser switches color instantly at that point.