CSS Gradient Generator

Create beautiful CSS gradients visually. Linear, radial, and conic gradients with real-time preview.

Gradient Type:

Direction:

Colors:

Color 1:

Color 2:

Preview:

CSS Code:

background: linear-gradient(90deg, #3B82F6, #EC4899);

Popular Presets:

CSS Gradient Types

📈 Linear Gradient

Colors flow in one direction. Great for backgrounds and buttons.

⭕ Radial Gradient

Colors radiate from a center point. Perfect for spotlights.

🔄 Conic Gradient

Colors rotate around a center. Ideal for pie charts.