CSS gradients explained: linear, radial and how to use them
Gradients are everywhere in modern design — buttons, backgrounds, hero sections, cards. In CSS they're powerful and lightweight (no image needed), but easy to make ugly. Here's how they work and how to keep them tasteful.
Gradients are generated, not images
A CSS gradient is drawn by the browser from a short instruction, so it's infinitely scalable and weighs nothing — no file to download, sharp at any size. That's a real performance win over using a gradient image.
Linear vs. radial
- Linear gradient — colors blend along a straight line, in a direction you set (top-to-bottom, left-to-right, or an angle like 45°). The workhorse for backgrounds and buttons.
- Radial gradient — colors radiate outward from a point, like a spotlight or a glow. Good for highlights and soft focal effects.
- Conic gradient — colors sweep around a center point like a color wheel or pie chart.
The anatomy of a gradient
A gradient needs at least two color stops — the start and end colors. You can add more stops and position them (e.g. "this color at 30%") to control exactly where the blend happens. The direction (an angle or keyword) sets which way a linear gradient flows.
Tips for gradients that look good
- Keep the two colors close in hue. Blue → teal looks smooth; red → green muddies into gray in the middle.
- Watch the "gray dead zone." Blending two very different colors passes through a dull midpoint. Pick analogous colors or add a middle stop.
- Subtle beats loud. A slight shift adds depth; a harsh rainbow screams. Small changes in lightness often look more premium.
- Angle matters. A gentle diagonal (like 135°) usually feels more dynamic than a flat top-to-bottom.
The fastest way to land a good one is to tweak the colors, angle, and stops visually and copy the CSS when it looks right — no trial-and-error in your stylesheet. Picking colors is easier if you understand HEX, RGB and HSL first.