Mastering CSS Gradients and Color Mixing: Linear, Radial, and Conic

CSS gradients offer lightweight visual depth without the bandwidth penalty of background images. However, naive RGB interpolation often creates a dull, desaturated gray "dead zone" in the middle of complementary color transitions.

Design smooth gradients with our tools:

• Blend and interpolate between two colors using the Color Mixer
• Design linear, radial, and conic CSS backgrounds with the CSS Gradient Generator
• Build stepped color stops with the Gradient Palette Builder

CSS Gradient Types

1. Linear Gradients

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

2. Radial Gradients

background: radial-gradient(circle at 50% 50%, #3b82f6 0%, #1e1b4b 100%);

3. Conic Gradients

background: conic-gradient(from 0deg, #f59e0b, #ef4444, #8b5cf6, #3b82f6, #f59e0b);

Avoiding the "Gray Dead Zone"

When interpolating between two contrasting hues (e.g. blue and orange) in standard sRGB, the mathematical average passes through low-saturation gray. Modern CSS solves this with color interpolation methods:

/* Modern interpolation space */
background: linear-gradient(in oklab, #00f, #f00);

You can preview color blends and generate cross-browser CSS code with the CSS Gradient Generator.