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 | Linearlinear-gradient()Backgrounds, buttons Radialradial-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 rightto right90deg Top to bottomto bottom180deg Diagonalto bottom right135deg
Popular Gradient Combos
NameColors 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