CSS gradients: linear, radial, conic

A CSS gradient is a generated image: the browser computes a smooth blend between colors and paints it wherever an image is allowed, most often as a background. Because it is an image, you can layer gradients, repeat them, and combine them with photos. There are three kinds, and once you know how color stops work, all three follow the same logic.

Linear gradients

A linear gradient blends along a straight line. You give it a direction and a list of color stops.

.box {
  background: linear-gradient(to right, #2563eb, #9333ea);
}

The first argument is the direction. You can use keywords like to right or to bottom left, or an explicit angle. With angles, 0deg points up and the value increases clockwise, so 90deg points right and 180deg points down.

background: linear-gradient(135deg, #06b6d4, #8b5cf6);

Each color can carry a position, written as a percentage or length. This is a color stop, and it tells the browser where that color should be fully reached along the line.

background: linear-gradient(to right, #f59e0b 0%, #ef4444 60%, #111827 100%);

Anything before the first stop is solid; anything after the last stop is solid. The blend happens between them.

Radial gradients

A radial gradient blends outward from a center point in a circle or ellipse.

background: radial-gradient(circle at center, #fde68a, #f97316);

You can set the shape (circle or ellipse), the size (closest-side, farthest-corner, and so on), and the position with at. This is useful for soft spotlights and rounded glows behind a card.

background: radial-gradient(circle at top left, #ffffff, #cbd5e1 70%);

Conic gradients

A conic gradient sweeps colors around a center point, like the hand of a clock. It is the right tool for color wheels, pie charts, and angular accents.

background: conic-gradient(from 0deg, #ef4444, #eab308, #22c55e, #ef4444);

Repeating the first color at the end makes the sweep loop seamlessly.

Hard stops for stripes

If two adjacent color stops sit at the same position, the blend has nowhere to happen and you get a crisp edge instead of a fade. This is a hard stop, and it turns a gradient into solid bands.

background: linear-gradient(
  90deg,
  #1e293b 0 33%,
  #334155 33% 66%,
  #475569 66% 100%
);

The same trick with conic-gradient produces a clean pie chart, and with repeating-linear-gradient it produces evenly spaced stripes:

background: repeating-linear-gradient(
  45deg,
  #e2e8f0 0 10px,
  #cbd5e1 10px 20px
);

Layering gradients

Because gradients are images, you can stack several in one background property, separated by commas. The first one listed sits on top, so later layers show through wherever earlier ones are transparent.

background:
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  radial-gradient(circle at top, #38bdf8, transparent 60%),
  #0f172a;

Here a flat overlay darkens a soft radial glow that sits on a solid base color. Using transparent as a stop is what lets the lower layers stay visible.

Common uses

Subtle button and card fills that read as one tone but add depth.
Section dividers and angular accents with hard stops.
Spotlights and vignettes with radial layers over an image.
Loading spinners and progress rings with conic sweeps.

The fastest way to get the syntax right is to build it visually and read off the result. The CSS Gradient Generator lets you drag color stops, pick the gradient type, and copy ready CSS. Once you have a palette you like, the Color Converter & Contrast Checker helps you tune the exact stop colors, and the Cubic Bezier Generator pairs well when you animate a gradient on hover.