CSS Gradients

CSS Gradients: Linear, Radial, and Conic Color Transitions

CSS gradients generate smooth transitions between two or more colors directly in the browser without downloading large background image files. Because browsers treat gradients as background-image values, they scale sharply to any Retina screen resolution with zero network requests.

Three Gradient Types

1. linear-gradient(): Blends colors along a straight line—by direction (to right, to bottom right) or angle (135deg).
2. radial-gradient(): Radiates outward from a center point as a circle or ellipse—great for subtle hero spotlight glows.
3. conic-gradient(): Sweeps colors clockwise around a center point like a clock—ideal for donut charts and circular progress indicators.

.hero-gradient {
    background-color: #1e3a8a;
    background-image: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #0ea5e9 100%);
    color: #ffffff;
    padding: 32px;
    border-radius: 12px;
}

.spotlight-card {
    background-color: #0f172a;
    background-image: radial-gradient(circle at top right, rgba(56, 189, 248, 0.25), transparent 60%);
    color: #f8fafc;
    padding: 24px;
}

.progress-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(#2563eb 0% 75%, #e2e8f0 75% 100%);
}

Text Gradients and Hard Color Stops

You can create sharp striped ribbons by placing two color stops at the exact same percentage (#2563eb 50%, #e2e8f0 50%). You can also apply a gradient to large headline text by pairing background-image with background-clip: text; color: transparent;.

Common Mistakes to Avoid

• Setting gradient on background-color: Gradients are generated images, so they only work inside background or background-image, never background-color.
• Creating muddy gray midpoints between opposite hues: When fading from bright blue to yellow or transparent, add a soft intermediate stop or use modern in oklch color interpolation (linear-gradient(in oklch to right, ...)).
• Skipping dark/light contrast checks across the entire gradient: Test text readability against both the lightest and darkest ends of the gradient.

Frequently Asked Questions

Can CSS gradients transition smoothly on :hover?

You cannot animate background-image directly with standard CSS transition, though you can animate background-position on an oversized gradient or fade an ::after overlay's opacity.

How do I add an image overlay gradient in one rule?

List the translucent gradient first followed by a comma and url(...) inside background-image.