Gradients and Blending
Creating smooth transitions without muddy middles.
Linear vs Radial
Linear gradients transition colors along a straight line. They are excellent for indicating flow, simulating directional light, or providing a subtle background wash.
Radial gradients radiate outward from a central point. They are perfect for creating a focal point—putting a lighter radial gradient behind a product image immediately draws the user's eye to the center.
Which type of gradient is typically best for creating a spotlight effect behind a central product image?
The Grey Dead Zone
When you create a gradient between two complementary colors (like blue and yellow) in standard sRGB, the math interpolates straight through the middle of the color wheel. The result? A muddy, desaturated grey dead zone in the middle of your vibrant gradient.
To fix this, you can manually add a midpoint color (e.g., adding pink between blue and yellow), or in modern CSS, you can tell the browser to interpolate in `oklch` or `hsl`, which travels *around* the perimeter of the color wheel, keeping saturation high.
What causes the 'grey dead zone' in a CSS gradient?