The gray dead zone in two-color gradients
If you build a gradient between two saturated complementary colors — say, blue (#3B82F6) to orange (#F97316) — the midpoint interpolates through gray in sRGB color space. The gradient looks muddy or washed out in the middle. This is not a rendering bug; it's how sRGB linear interpolation works between colors that are opposite on the hue wheel.
The fix: add a mid-point color stop at 50% using a saturated color that sits between the two hues on the wheel. For blue-to-orange, that's roughly purple (#7C3AED) or magenta. Alternatively, use oklch color interpolation (supported in Chrome 111+ and Safari 16.2): background: linear-gradient(in oklch, #3B82F6, #F97316) — the OKLCH color space interpolates through perceptually uniform hues, avoiding the gray dead zone entirely.
When to use linear, radial, and conic
- linear-gradientColor transitions along a straight line at any angle. Use for hero backgrounds, button hover states, and directional highlights. The angle
to bottom rightis equivalent to135deg— both are valid. - radial-gradientColor radiates outward from a center point. Use for spotlight effects, circular element backgrounds, and vignette overlays on images. Control shape with
circleorellipse. - conic-gradientColor sweeps around a center point like a clock face. Use for pie charts, color wheels, and angular segment indicators. Often combined with
border-radius: 50%to render a circle. Browser support is universal as of 2023.
CSS gradients vs. image backgrounds for performance
CSS gradients are rendered by the GPU on every paint. A simple two-stop linear gradient has essentially zero performance cost. A complex multi-stop radial gradient on a large element that repaints frequently (e.g., inside a scroll animation) can cause paint bottlenecks on low-end hardware. For static decorative backgrounds, CSS gradients are always faster than image files — no network request, no decode step, scalable at any resolution.
10 popular CSS gradient examples — copy and paste
| Name | CSS | Preview |
|---|---|---|
| Sunset | linear-gradient(135deg, #f093fb 0%, #f5576c 100%) | #f093fb, #f5576c |
| Ocean | linear-gradient(135deg, #667eea 0%, #764ba2 100%) | #667eea, #764ba2 |
| Forest | linear-gradient(135deg, #11998e 0%, #38ef7d 100%) | #11998e, #38ef7d |
| Fire | linear-gradient(135deg, #f7971e 0%, #ffd200 100%) | #f7971e, #ffd200 |
| Midnight | linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%) | #2c3e50, #4ca1af |
| Rose Gold | linear-gradient(135deg, #f6d365 0%, #fda085 100%) | #f6d365, #fda085 |
| Radial center | radial-gradient(circle, #6a11cb 0%, #2575fc 100%) | #6a11cb, #2575fc |
| Mesh (conic) | conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #ff6b6b) | multi |
| Diagonal stripe | repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 10px, #dee2e6 10px, #dee2e6 20px) | stripes |
| Diagonal fade | linear-gradient(to bottom right, rgba(255,255,255,0) 40%, rgba(99,102,241,0.3) 100%) | rgba fade |