CSS Gradients for Web Design: Linear, Radial, and Conic Explained

A CSS gradient is a smooth transition between two or more colors, generated entirely in code — no image file, no download, no HTTP request. Gradients are lighter than background images, scale to any screen size without pixelation, and can be animated. They're the simplest way to add visual depth to a page without adding weight.

The three gradient types

• Linear gradient — colors transition along a straight line (top to bottom, left to right, or at any angle). Use for hero sections, buttons, cards, and any surface where you want a subtle color shift.
• Radial gradient — colors radiate outward from a center point (circle or ellipse). Use for spotlight effects, hover states, and backgrounds where the focus is in the middle.
• Conic gradient — colors rotate around a center point like a color wheel. Use for pie charts, loading spinners, and decorative elements where the transition follows a circular path.

Linear gradients in practice

The most common gradient is a simple top-to-bottom linear gradient: background: linear-gradient(to bottom, #667eea, #764ba2). This transitions from a blue-purple at the top to a deeper purple at the bottom — a subtle, professional look that works for hero sections, card backgrounds, and buttons. The angle can be adjusted (45deg, 135deg, etc.) to create diagonal transitions.

When gradients help vs hurt

• Help: Hero sections (subtle gradient adds depth without distraction), buttons (gradient makes them more tappable), cards (gradient background differentiates from flat content).
• Hurt: Large areas with high-contrast gradients (distracting and hard to read text over), gradients with more than 3 colors (becomes muddy), gradients on text (usually poor readability unless carefully designed).
• Rule of thumb: use gradients at low opacity or with colors that are close together on the color wheel. The best gradients are the ones users don't consciously notice.

Exporting for different frameworks

A gradient defined in CSS can be exported as standard CSS, SCSS, Tailwind CSS arbitrary values, React inline styles, or CSS custom properties — depending on your project's stack. The gradient itself is the same; only the syntax wrapper changes. Build it visually, then copy the format you need.

Color stops don't have to be evenly spaced

The default mental model of a gradient is a smooth, even blend, but explicit stop positions let you do something quite different: linear-gradient(#fff 0%, #fff 40%, #000 100%) produces a solid white block for the first 40% of the space, then a smooth transition to black across the remaining 60% — a hard edge followed by a blend, in one declaration. Stacking several stops with tight, deliberately repeated positions is also how CSS gradients simulate stripes and hard color bands without any image file at all. Most people only ever use the two-stop smooth-blend form, but the positional control is there whenever a design calls for something less uniform.

Why gradients are cheaper to render than they look

A CSS gradient is computed by the browser's rendering engine rather than decoded from a stored image file, which is the practical reason it's lighter than a background image: there's no file to download, no decode step, and the computation itself is simple enough that it's typically handled efficiently by GPU compositing on modern browsers — the same pipeline that makes CSS transforms and opacity changes smooth. This is also why an animated gradient (transitioning colors or angle on hover, for instance) tends to stay smooth where an equivalent image swap or filter animation might stutter — the browser is recalculating a formula, not re-decoding pixels.