Create beautiful linear and radial gradients – custom colors, angle, position. Live preview & CSS code
Want to embed this color gradient generator on your website? Use this code:
Angles, directions, color stops, and how to control them.
Read Tutorial →Shape, size, position – create sunbursts, spotlights, and more.
Read Tutorial →How to make stripes, checks, and complex backgrounds.
Read Tutorial →| Feature | Our Tool | Tool A | Tool B |
|---|---|---|---|
| Free & unlimited | ✅ | ✅ | ❌ (limit) |
| Live preview | ✅ | ✅ | ✅ |
| Linear & radial | ✅ | ✅ | ✅ |
| Custom angle (0-360) | ✅ | ✅ | ❌ |
| Radial shape & position | ✅ | ❌ | ✅ |
| Swap colors | ✅ | ✅ | ❌ |
| Download CSS file | ✅ | ❌ | ✅ |
| Client-side / private | ✅ | ❌ | ✅ |
Linear gradients transition colors along a straight line (direction/angle). Radial gradients transition colors outward from a central point (shape: circle/ellipse).
This generator focuses on two‑color gradients for simplicity. You can easily add more color stops by editing the CSS: linear-gradient(45deg, #667eea, #764ba2, #ff6b6b).
0° = from bottom to top, 90° = from left to right, 180° = from top to bottom, 270° = from right to left. You can also use keywords like to top, to bottom right etc.
Yes! Use background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;. This generator outputs background gradients, but you can adapt the code.
Gradients add depth, dimension, and visual interest to backgrounds, buttons, cards, and text. They are fully scalable, resolution‑independent, and can reduce image requests – improving performance.
Guide the user's eye with smooth color transitions.
Pure CSS – no image files, no HTTP requests.
Combine any colors, create custom themes instantly.
Tools to take your gradients further