🌈 CSS Gradient Generator

Build linear, radial, and conic CSS gradients visually. Add color stops, adjust positions and angles, and copy the generated CSS.

🎨 Gradient Type
📐 Angle
deg
🎨 Color Stops
0%
100%
✨ Presets
Indigo
Sunset
Ocean
Forest
Fire
Aurora
👁 Preview
📋 CSS Output
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
Full rule:
.element {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}
As background-image:
background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);