CSS Gradient Generator
Build linear and radial CSS gradients visually with live preview.
CSS Code
background: linear-gradient(90deg, #e8792d, #4a1d0b);
Examples
| Input | Result |
|---|---|
| Linear, 90deg, #E8792D to #4A1D0B | background: linear-gradient(90deg, #e8792d, #4a1d0b); |
| Radial, #3498DB to #FFFFFF | background: radial-gradient(circle, #3498db, #ffffff); |
| Linear, 45deg, #FF6B6B to #4ECDC4 to #45B7D1 | background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1); |
| Linear, 180deg, #000000 to #FFFFFF | background: linear-gradient(180deg, #000000, #ffffff); |
About this tool
The gradient generator lets you build CSS gradients visually with a live preview. Choose between linear and radial gradient types, set the angle for linear gradients (in 15-degree increments from 0 to 360), and pick two or three color stops. The preview updates instantly so you can see exactly what the gradient looks like before copying the code.
The generated CSS uses standard syntax that works in all modern browsers. You get a complete background property value that you can drop into any stylesheet. This saves time compared to writing gradient syntax by hand, especially when you want to experiment with different angles and color combinations.
Frequently asked questions
How many color stops can I add to a gradient?
The tool supports up to three color stops. The third stop is optional. Two stops cover most use cases, and the third lets you create more complex transitions.
What is the difference between linear and radial gradients?
A linear gradient transitions along a straight line at the angle you set. A radial gradient transitions outward from a center point in a circular pattern.
Can I copy the CSS code directly into my project?
Yes. The tool outputs a ready-to-use CSS background property. Copy it and paste it into your stylesheet as-is.