CSS Gradients: Linear, Radial, and Conic — A Complete Guide

CSS gradients are pure CSS — no images, no HTTP requests, no scaling artifacts. Once you understand the three gradient types and their common parameters, you can produce anything from a subtle background tint to a complex multi-stop mesh pattern. This guide covers all three types with real examples you can copy directly into your stylesheet.

Why use CSS gradients instead of images

• Zero network cost — the browser renders them natively; nothing is downloaded.
• Perfect scaling — they're resolution-independent; they look sharp at any pixel density.
• Animatable — with CSS @property and Houdini, you can transition gradient positions and colors.
• Composable — stack multiple gradients via background-image: g1, g2, g3;.

linear-gradient

The most common gradient: colors blend along a straight line at a given angle.

background: linear-gradient(135deg, #00f2fe, #4facfe);

The first argument is the direction: to right, to bottom right, or an angle like 135deg. The remaining arguments are color stops.

Color stops

Each stop is a color optionally followed by a position:

background: linear-gradient(
  to right,
  #ff512f 0%,
  #dd2476 50%,
  #ff512f 100%
);

Without positions, the browser distributes stops evenly. You can use any CSS length — px, %, vw — for the position.

Hard stops

A sharp edge (no blend) happens when two consecutive stops share the same position:

background: linear-gradient(
  to right,
  red 50%,
  blue 50%
);

This produces a precise half-red, half-blue split — useful for flags, split-color effects, and striped patterns.

radial-gradient

Colors radiate outward from a center point, forming circles or ellipses.

background: radial-gradient(circle, #00f2fe, #0d1515);

The first argument controls the shape (circle or ellipse) and optionally the size and position:

background: radial-gradient(
  circle at 30% 70%,
  #ff6b6b 0%,
  transparent 60%
);

This places the burst at 30% from the left, 70% from the top — useful for spot-lighting effects or glowing orbs behind UI elements.

Size keywords

• closest-side / closest-corner — the gradient ends at the nearest edge/corner.
• farthest-side / farthest-corner (default) — the gradient reaches the farthest edge/corner.

conic-gradient

Colors sweep around a center point like the hands of a clock — ideal for pie charts, color wheels, and radial progress bars.

background: conic-gradient(
  from 0deg at 50% 50%,
  red, orange, yellow, green, blue, violet, red
);

The from angle rotates the entire sweep. Each stop is placed at an angular position:

background: conic-gradient(
  #4CAF50 0deg 120deg,   /* green: first third */
  #2196F3 120deg 240deg, /* blue: second third */
  #FF5722 240deg 360deg  /* red: last third */
);

Pie charts with conic-gradient

A basic pie chart needs no SVG or canvas:

.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #06d6a0 0% 35%,   /* 35% */
    #118ab2 35% 75%,  /* 40% */
    #ef476f 75% 100%  /* 25% */
  );
}

Stacking multiple gradients

background-image accepts a comma-separated list; later gradients render underneath:

background-image:
  radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 40%),
  linear-gradient(135deg, #1a1a2e, #16213e);

The semi-transparent radial gradient layers a subtle glow over the solid linear background — a popular glassmorphism technique.

Animating gradients

Modern browsers support @property to animate custom properties, including inside gradients:

@property --hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.animated {
  background: hsl(var(--hue), 80%, 60%);
  animation: spin-hue 4s linear infinite;
}

@keyframes spin-hue {
  to { --hue: 360deg; }
}

Without @property, CSS treats gradient changes as discrete (no interpolation). With it, you can smoothly animate any numeric parameter inside a gradient.

Common patterns

Frosted glass overlay

background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0.1),
  rgba(255, 255, 255, 0.05)
);
backdrop-filter: blur(10px);

Diagonal stripe pattern

background: repeating-linear-gradient(
  45deg,
  transparent,
  transparent 10px,
  rgba(0,0,0,0.05) 10px,
  rgba(0,0,0,0.05) 20px
);

Subtle bottom fade (scroll indicator)

background: linear-gradient(to bottom, transparent 80%, rgba(0,0,0,0.8));

Generate and copy gradient CSS

The CSS Gradient Generator lets you design linear, radial, and conic gradients interactively — pick colors, drag stops, adjust opacity, and choose from 12 presets — then copy the production-ready CSS in one click. All rendering happens in your browser.