CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
| Color | Position | |
|---|---|---|
| 0% | ||
| 100% |
background: linear-gradient(135deg, #aabbcc 0%, #112233 100%);
About the CSS Gradient Generator
This CSS gradient generator lets you build linear and radial gradients visually and copy the exact code into your stylesheet. Pick a type, set the angle for linear gradients, add as many color stops as you need, and drag each stop along the bar to place it. The large preview updates as you go, so you see the real result before you paste anything into your project.
A gradient is made of color stops, where each stop is a color and a position between 0 and 100 percent. For a linear gradient the angle controls the direction the colors travel: 0 degrees points up, 90 degrees points right, and 135 degrees gives the diagonal that many interfaces use. A radial gradient spreads outward from a center point, which suits soft glows, spotlights, and rounded backgrounds.
The output is plain CSS you can drop onto any element through the background property. Because it is a single value, you can reuse it across buttons, hero sections, cards, and overlays, or assign it to a custom property and reference it everywhere. Adding more stops gives you smoother multi color blends, while keeping two stops gives you a clean two color fade.
Everything runs in your browser. The colors you choose and the gradient you build are never uploaded to any server, so your work stays on your machine.
Reach developers and designers who use these tools every day. Privacy-first, no trackers.
Frequently asked questions
What is the difference between a linear and a radial gradient?
A linear gradient blends colors along a straight line whose direction you set with an angle, so the colors travel from one edge toward another. A radial gradient blends colors outward from a center point in a circular or elliptical shape, which is useful for glows and spotlights.
How does the angle work in a linear gradient?
The angle sets the direction the colors travel. 0 degrees points straight up, 90 degrees points to the right, 180 degrees points down, and 270 degrees points left. 135 degrees produces the common top left to bottom right diagonal. The angle control only appears when you select the linear type.
Can I use more than two colors?
Yes. Use the Add stop button to insert as many color stops as you want, each with its own color and position. More stops let you create smooth multi color blends. The tool keeps at least two stops at all times so the preview always shows a real gradient.
How do I apply the generated code to an element?
Copy the output and assign it to the background property of any element, for example background: linear-gradient(135deg, #aabbcc 0%, #112233 100%). You can also store it in a CSS custom property and reuse it across multiple components.
Are my colors uploaded anywhere?
No. The gradient is built entirely in your browser using your chosen colors and positions. Nothing about your gradient is sent to a server, so unreleased brand colors and design work never leave your machine.