CSS gradients: linear, radial, conic and OKLCH

A linear gradient blends colors along a straight line. The first argument is the direction: an angle or a keyword. 0deg points up, 90deg to the right, and angles go clockwise. The default is to bottom (180deg).

.hero {
  /* angle: 135deg runs from top-left to bottom-right */
  background-image: linear-gradient(135deg, #8B5CF6, #EC4899);
}
.band {
  /* keyword direction */
  background-image: linear-gradient(to right, #0EA5E9, #22C55E);
}

to top right and 45deg are not the same: the keyword form aims at the corner of the actual box, so its angle changes with the aspect ratio, while 45deg is fixed. Use keywords when the gradient should follow the shape and angles when it should match across differently sized elements.

Each color can take a position. Without positions, stops are spread evenly. Two stops at the same position make a hard edge with no blend, which is how stripes and progress bars are drawn.

/* hold the first color for 30%, then blend */
background-image: linear-gradient(90deg, #1E3A8A 30%, #38BDF8);

/* hard stop: two flat halves */
background-image: linear-gradient(90deg, #F97316 50%, #FDE68A 50%);

/* a color hint: move the blend's midpoint to 20% */
background-image: linear-gradient(90deg, #111827, 20%, #F9FAFB);

A radial gradient spreads from a point. You control the shape (circle or ellipse, the default), the size (closest-side, farthest-corner and so on, or a length) and the center with at.

/* a soft spotlight in the top-left corner */
background-image: radial-gradient(circle at 20% 10%, #FDE68A, transparent 60%);

/* a vignette */
background-image: radial-gradient(ellipse at center, transparent 50%, rgb(0 0 0 / 0.5));

Stacking several radial gradients that fade to transparent is the basis of a CSS mesh gradient; see mesh gradients in pure CSS.

A conic gradient sweeps colors around a center point, like a color wheel or a pie chart. Repeat the first color at the end, or the sweep shows a hard seam where it starts and ends — Tinta’s gradient pages do this for you when you switch a gradient to conic.

/* smooth sweep: first color repeated at the end */
background-image: conic-gradient(from 90deg at center, #F43F5E, #8B5CF6, #06B6D4, #F43F5E);

/* a pie chart with hard stops */
background-image: conic-gradient(#6366F1 0 40%, #F59E0B 40% 75%, #10B981 75%);

repeating-linear-gradient(), repeating-radial-gradient() and repeating-conic-gradient() tile their stops across the box, which gives stripes, rings and checkerboards without an image.

/* diagonal warning stripes */
background-image: repeating-linear-gradient(
  45deg,
  #FACC15 0 12px,
  #1C1917 12px 24px
);

/* a checkerboard */
background: repeating-conic-gradient(#E7E5E4 0 25%, #FFFFFF 0 50%) 0 0 / 24px 24px;

By default browsers blend gradient colors in sRGB. Between two saturated colors on opposite sides of the wheel, the sRGB midpoint is a desaturated grey or brown: blue to yellow passes through a muddy grey. The CSS Color 4 syntax lets you choose the color space:

/* default: sRGB, often a grey middle */
background-image: linear-gradient(90deg, #2563EB, #FACC15);

/* perceptual: OKLab keeps the middle bright and even */
background-image: linear-gradient(in oklab 90deg, #2563EB, #FACC15);

/* OKLCH also interpolates hue: the middle passes through green */
background-image: linear-gradient(in oklch 90deg, #2563EB, #FACC15);

/* choose the long way round the hue wheel */
background-image: linear-gradient(in oklch longer hue 90deg, #2563EB, #FACC15);

in oklab is the safe choice for smooth, even blends; in oklch keeps chroma high and travels through intermediate hues, which can be lovely or can introduce a color you did not ask for. The syntax has been supported in Chrome, Edge, Safari and Firefox since 2023 (Baseline 2023). Older browsers drop the whole declaration, so put a plain fallback first:

.hero {
  background-image: linear-gradient(90deg, #2563EB, #22C55E, #FACC15);
  background-image: linear-gradient(in oklch 90deg, #2563EB, #FACC15);
}

• Banding (visible steps) shows up in long, subtle gradients between similar dark colors, because 8-bit color has only 256 levels per channel. Shorten the distance, increase the color difference, or overlay a faint noise texture.
• Gradients are drawn by the browser, so they cost no download and stay sharp at any size. They are cheap to paint, but animating background-position on a huge gradient every frame is not; prefer animating opacity or transform of a gradient layer.
• Text on a gradient must pass contrast against every part of it. Check both ends, and the middle, with the contrast checker.

The gradient generator builds a gradient from your colors with an angle control and copy-paste CSS, and the gradient library has ready-made ones, each with linear, radial and conic variants and a CSS export. Browse them by color, for example blue or pink.