CSS Gradient Generator

The reason gradients often look muddy in the middle is the color space. CSS interpolates in sRGB by default, and blending between two saturated colors in sRGB passes through a desaturated gray zone. Modern CSS lets you interpolate in oklch instead, which keeps perceived lightness consistent across the transition and avoids the dead gray band entirely.

For subtle depth, keep gradients low contrast: two shades of the same hue a few steps apart reads as material, while two distant hues reads as a decoration from 2012. Conic gradients are the least-used type and the most useful one for progress rings and pie-style indicators without any SVG.