CSS Gradient Generator
Create beautiful CSS gradients visually. Build linear, radial, and conic gradients with custom colors, positions, and angles.
Gradient Types
| Type | CSS | Use Case |
|---|---|---|
| Linear | linear-gradient() | Backgrounds, buttons |
| Radial | radial-gradient() | Spotlights, orbs |
| Conic | conic-gradient() | Pie charts, dials |
Linear Gradient Syntax
``css
/* Direction + colors */
.gradient {
background: linear-gradient(to right, #3B82F6, #8B5CF6);
}
/* Angle */
.angled {
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
}
/* Multiple stops */
.rainbow {
background: linear-gradient(
90deg,
red, orange, yellow, green, blue, violet
);
}
``
Gradient Directions
| Direction | CSS | Angle |
|---|---|---|
| Left to right | to right | 90deg |
| Top to bottom | to bottom | 180deg |
| Diagonal | to bottom right | 135deg |
Popular Gradient Combos
| Name | Colors |
|---|---|
| Sunset | #FF512F → #F09819 |
| Ocean | #2193B0 → #6DD5ED |
| Royal | #141E30 → #243B55 |
| Candy | #D53369 → #CBAD6D |
Export Options
- Copy CSS code
- Copy as Tailwind class
- Download as image
- Save gradient preset