CSS Gradient Generator
Create stunning CSS gradients with live preview. Support for linear, radial, and conic gradients with multiple color stops.
Live Preview
Current Gradient
linear
linear-gradient(90deg, #3b82f6 0%, #ef4444 100%)Export Code
Gradient Type
Direction
Color Stops
Add multiple colors to create complex gradients
0%
100%
Quick Actions
Gradient Info
Type:
linear
Colors:2
Angle:90°
Understanding CSS Gradients
Linear Gradients
Colors transition in a straight line. Perfect for backgrounds, buttons, and directional effects.
Radial Gradients
Colors radiate from a center point. Great for spotlights, orbs, and circular effects.
Conic Gradients
Colors rotate around a center point. Ideal for progress indicators and artistic effects.