scalpel@labs: ~/glossary/css-gradient.mdx6 sections

CSS Gradients: Linear, Radial and Conic

A CSS gradient is a generated image that blends two or more colour stops. `linear-gradient()` runs the blend along an angle, `radial-gradient()` spreads it from a centre point, and `conic-gradient()` sweeps it around a centre like a colour wheel.

extension: Scalpel Colorupdated: 2026-08-14read_time: 2 min
less css-gradient.mdx

Why it matters

Gradients are one of the few ways to add depth in pure CSS, no image files, no requests. They are also one of the most misunderstood. The thing that trips people up: a gradient is an <image>, not a <color>, so it belongs in background, not background-color, and you cannot use it where a plain colour is expected. Stops without positions spread evenly; add positions to control exactly where the blend happens.

How it works

A gradient is a function that generates an image. You pass it a list of colours to blend between (stops) and instructions for how to blend them. The browser renders it as a bitmap and paints it as the background.

Three types exist:

  • Linear: blends along a straight line at an angle.
  • Radial: spreads from a centre point outward.
  • Conic: sweeps around a centre like a pie chart.

A simple linear gradient from blue to purple:

background: linear-gradient(135deg, #3b82f6, #8b5cf6);

The 135deg is the angle (0° is up, 90° is right, 180° is down, 270° is left). Omit the angle and it defaults to 180deg (top to bottom).

A radial gradient that spreads from the centre:

background: radial-gradient(circle, #3b82f6 0%, #ffffff 100%);

A conic gradient that sweeps like a hue wheel:

background: conic-gradient(red, yellow, lime, blue, red);

Colour stops and positions

By default, stops spread evenly. With three colours, the first is at 0%, the second at 50%, the third at 100%. To control it:

background: linear-gradient(
  90deg,
  #3b82f6 0%,
  #8b5cf6 30%,      /* purple sooner */
  #ec4899 100%
);

Use explicit positions to build hard stops (stripes):

background: linear-gradient(
  90deg,
  red 0%,
  red 50%,          /* red stays solid until 50% */
  blue 50%,         /* then hard switch to blue */
  blue 100%
);

What does not matter

A gradient is background, not background-color. Setting background-color: linear-gradient(...) does nothing. The correct property is background (which includes color), or background-image.

Gradients are images, so older browsers that understand images but not gradients will just skip the gradient and show the background colour. Add a fallback:

background-color: #3b82f6;           /* fallback for old browsers */
background-image: linear-gradient(135deg, #3b82f6, #8b5cf6);

Code example

A practical hero section with a gradient overlay:

.hero {
  background-color: #3b82f6;  /* fallback */
  background-image: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.8),       /* blue, semi-transparent */
    rgba(139, 92, 246, 0.8)        /* purple, semi-transparent */
  );
  background-attachment: fixed;  /* parallax effect */
  min-height: 100vh;
}

Multiple stacked gradients for texture:

background-image:
  radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.1), transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(0, 0, 255, 0.1), transparent 50%),
  linear-gradient(90deg, #ffffff, #f3f4f6);

Radial with a specific size:

background: radial-gradient(
  circle 200px at 50% 50%,    /* circle, 200px radius, centred */
  #3b82f6 0%,
  transparent 100%
);

How Scalpel Color shows it

Open the Gradient tab. You will find controls for the three gradient types, colour stops, and a live preview. Add or remove stops, adjust positions and angles, and watch the preview update in real time. The generated CSS is shown below so you can copy it straight into your stylesheet. Scalpel Color also reads gradients from the current page and shows what colours and positions they use.

Sources