CSS Gradient Generator
Build a linear or radial CSS gradient and copy the generated code.
Last updated August 26, 2026
background: linear-gradient(135deg, #2dd4bf, #7c3aed);
About this tool
Build a linear or radial CSS gradient visually — pick two colors and an angle — and get the exact `background` CSS property to paste into your stylesheet, without guessing at angle values or color stop syntax.
Linear gradient angle reference
| Angle | Direction |
|---|---|
| 0deg | Bottom to top |
| 90deg | Left to right |
| 180deg | Top to bottom |
| 270deg | Right to left |
Code examples
The second line (where shown) is the inverse operation.
| Language | Code |
|---|---|
| CSS (linear) | background: linear-gradient(135deg, #2dd4bf, #7c3aed); |
| CSS (radial) | background: radial-gradient(circle, #2dd4bf, #7c3aed); |
Frequently asked questions
What's the difference between a linear and radial gradient?
A linear gradient transitions colors along a straight line at a given angle. A radial gradient transitions outward from a center point in a circular or elliptical shape.
Can I add more than two colors to the gradient?
This tool generates a simple two-color gradient; for more color stops, take the generated CSS and add additional comma-separated colors (and optional stop positions like `20%`) manually.