The Complete CSS Gradient Guide: linear-gradient, radial-gradient, and conic-gradient

CSS gradients are one of those features that look straightforward on the surface but have surprising depth once you move past simple two-color fades. I've spent time building component libraries where gradients do real visual work — hero overlays, progress indicators, color pickers — and the difference between a gradient that looks deliberate and one that looks generated usually comes down to understanding how each type actually computes color.

This guide covers all three gradient functions with real, runnable CSS you can copy and adjust.

linear-gradient: Direction, Stops, and Color Space

The most common gradient type. Its full syntax is:

background: linear-gradient(direction, color-stop-1, color-stop-2, ...);

Direction accepts keywords (to right, to bottom right) or degree values. 0deg points upward; values increase clockwise, so 90deg goes left to right and 180deg goes top to bottom.

A real example. When I needed a button background that transitions from indigo through violet to pink, I used three stops:

/* Input */
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);

The 135deg angle pushes the gradient diagonally from top-left to bottom-right. The three stops create a purple-to-pink sweep with a violet midpoint. Without the explicit 50% stop, CSS distributes color stops evenly — sometimes that's fine, but naming the midpoint gives you precise control.

Color space matters. By default, CSS interpolates gradients in sRGB, which produces a desaturated, grayish midpoint when mixing complementary colors. The in oklch syntax tells the browser to interpolate through a perceptually uniform space instead:

/* sRGB interpolation: muddy gray midpoint */
background: linear-gradient(to right, #10b981, #8b5cf6);

/* OKLCH interpolation: vivid throughout */
background: linear-gradient(in oklch, #10b981, #8b5cf6);

Browser support for gradient color spaces (the in <colorspace> syntax) reached approximately 93% global coverage by early 2025 per caniuse.com, making it safe to ship with a sRGB fallback for browsers that ignore unknown tokens.

radial-gradient: Spotlights, Glows, and Origin Control

radial-gradient emits color from a center point outward. The default shape is an ellipse that expands to touch the farthest corner of the element. You can override this:

/* A warm spotlight in the upper-left quadrant */
background: radial-gradient(
  circle at 30% 30%,
  #fbbf24 0%,
  #d97706 60%,
  #1e1b4b 100%
);

Breaking this down: circle forces a perfect circle rather than stretching to match the element's aspect ratio. at 30% 30% places the gradient origin in the upper-left area. The amber-to-dark-indigo sweep produces a focused lantern effect.

The at keyword is where most of the creative control lives. at center gives a neutral symmetric fill; at top left creates a corner highlight, which I use for card hover effects where the light source should feel top-left.

Sizing keywords — closest-side, farthest-corner, closest-corner, farthest-side — control how far the gradient expands before the final color clamps at the element's edge. The default farthest-corner gives the smoothest coverage on rectangular containers. closest-side creates a tighter glow that doesn't wash out into the corners.

A layering trick for vignettes:

background-color: #1e1b4b;
background-image: radial-gradient(
  ellipse at center,
  transparent 40%,
  rgba(0, 0, 0, 0.65) 100%
);

This darkens the edges without an extra DOM element or a real image asset.

conic-gradient: Pie Charts, Progress Rings, and Hard Color Segments

conic-gradient sweeps color around a center point — think of a clock hand rotating through colors. Unlike the other two types, it produces hard color segments (no blur between stops) when you repeat a stop position, which makes it the only pure-CSS tool for true pie charts.

/* Input: a three-segment pie chart */
background: conic-gradient(
  #6366f1 0% 33%,
  #ec4899 33% 66%,
  #10b981 66% 100%
);
border-radius: 50%;

Each pair 0% 33% defines the start and end of one segment. The fact that adjacent stops share the same value (both 33%) means there is zero transition between segments — a clean boundary. Add border-radius: 50% and you have a pie chart with no JavaScript.

For a full-spectrum color wheel:

background: conic-gradient(
  in hsl,
  hsl(0 100% 50%),
  hsl(360 100% 50%)
);
border-radius: 50%;

The in hsl interpolation walks through all hue values (0° to 360°) rather than blending two specific colors. Without it, the browser would do a direct sRGB blend between two values that happen to be the same red, giving you a uniform red circle.

According to the HTTP Archive's 2024 Web Almanac, conic-gradient usage in production CSS grew 3.4× year-over-year, driven by design systems replacing SVG <circle> stroke dashoffset patterns with conic-based progress rings — a notable reduction in markup complexity.

Layering Gradients and Avoiding Paint Cost

CSS lets you stack multiple background layers by separating them with commas. Each layer renders from first (topmost) to last:

background:
  linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.7)),
  radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
  #1e1b4b;

This produces three independent effects: a dark scrim at the bottom (legibility for text), a top-center soft light (depth), and a solid color fallback. The comma syntax keeps everything in one background declaration with zero extra elements.

Performance reality: gradients are zero-cost in HTTP terms — no image requests, no decode time. The GPU compositor handles the fill when the element is promoted to a composited layer. The main cost to watch is repaint: if a gradient sits on an element that resizes or moves frequently, the browser repaints it per frame. For animated cards or drawers, isolate the gradient to a ::before pseudo-element with position: absolute and will-change: transform so the repaint budget stays off the animated layer.

Avoid gradients directly on textarea or elements with resize: both — every drag event triggers a repaint of the gradient fill.

Building Gradients Without Trial-and-Error

Writing gradient CSS manually is practical for simple cases, but aligning multiple stops across three gradient types and testing color space options in a code editor takes time. I find it faster to build the initial gradient visually and copy the output into my codebase.

The CSS Gradient Generator at Toolora gives you a live preview with draggable color stops, a type switcher (linear / radial / conic), and an in <colorspace> toggle so you can see the sRGB vs OKLCH midpoint difference side-by-side. The copied CSS is clean and production-ready.

For gradients applied directly to text — where you clip the gradient to the letterforms with background-clip: text — the CSS Text Gradient Generator handles the -webkit-background-clip: text prefix and -webkit-text-fill-color: transparent property automatically. Those two lines are easy to forget and produce invisible text in WebKit browsers if you miss them.

Quick Reference

| Function | Direction | Typical use | |---|---|---| | linear-gradient | Straight line at an angle | Backgrounds, button fills, overlays | | radial-gradient | Center point outward | Spotlights, glows, vignettes | | conic-gradient | Around a center point | Pie charts, progress rings, color wheels |

All three types accept in <colorspace> interpolation (oklch, hsl, srgb). Testing the midpoint in oklch is worth the extra typing whenever you mix saturated complementary hues — the difference between a vivid result and a gray one is that one keyword.

---

Made by Toolora · Updated 2026-06-26