CSS background techniques: a practical reference

Last reviewed on 28 April 2026.

Most of the backgrounds you see on a modern site are not images. They are CSS — gradients, layered fills, blend modes, masks and repeating patterns — composed at render time and rendered fresh at every resolution. Working in CSS instead of shipping a flattened image gives you sharper output on high-density displays, smaller page weight, and the ability to swap themes or honour user preferences on the fly. This page is a working reference to the techniques that matter most.

Layered backgrounds

The single most useful CSS feature for backgrounds is that background accepts multiple layers, applied bottom-up. Each layer can be a colour, a gradient, an image, a repeating pattern, or any combination, and each layer can have its own size, position and repeat behaviour. The result is that a "complex" background is usually just three or four simple layers stacked.

/* a soft radial highlight over a near-black canvas */
background:
  radial-gradient(ellipse at top, rgba(255,255,255,0.04), transparent 60%),
  radial-gradient(ellipse at bottom right, rgba(255,107,107,0.05), transparent 50%),
  #0a0a0a;

Two soft radial highlights and a flat colour produce a hero-section background that, in a raster, would be a 200 KB image. As CSS it is a few hundred bytes and remains crisp on every display.

Gradients in the right colour space

By default, linear-gradient(blue, yellow) interpolates in sRGB and passes through a muddy grey at the midpoint. Modern browsers let you specify a perceptual colour space:

background: linear-gradient(in oklch, blue, yellow);

OKLCH and OKLab follow perceptual lightness and chroma, so the midpoint stays vivid. The gradient backgrounds hub covers the trade-offs in more depth.

Conic gradients for radial fan effects

Conic gradients sweep colour around a centre point rather than along a line. They are how you build colour wheels, segmented circles, and the loud rotating-ring backgrounds that became common on developer-tool landing pages.

background: conic-gradient(from 180deg at 50% 50%,
  #ff6b6b, #f093fb, #4facfe, #43e97b, #fee140, #ff6b6b);

Repeating patterns from gradients

repeating-linear-gradient and repeating-radial-gradient let you build stripes, grids, dot patterns and chevrons without a single image. The pattern shown below is two repeating gradients stacked on a near-black ground.

background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 24px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 24px),
  #0a0a0a;

The same approach handles diagonal stripes (one repeating gradient at 45°), checkerboards (two gradients at +45° and −45° offset), and dotted grids (a small radial gradient repeated by background-size). The geometric backgrounds hub covers the design considerations.

Blend modes

The background-blend-mode property blends each layer with the layer beneath it, so the same source colours produce different visuals depending on the blend rule. multiply deepens, screen lightens, overlay increases mid-tone contrast, soft-light applies a gentle tint without crushing the underlying values. A common move is to layer a photograph under a saturated colour using multiply to produce a duotone hero, then add the headline on top.

background:
  linear-gradient(135deg, #1a1a1a, #2a2a2a),
  url('/images/hero.jpg');
background-blend-mode: soft-light;
background-size: cover;

Masks and clipping

Where a background is opaque, the mask-image property lets you make parts of it transparent. A radial mask creates a vignette; a linear mask fades a hero into the next section without a hard edge; an SVG mask carves a shape out of a coloured fill. clip-path does a related job by limiting which part of an element is rendered at all. Both are now well supported and behave reliably across modern browsers.

Backdrop filters for layered UI

For interface surfaces that float over a background — sticky headers, dialogs, popovers — backdrop-filter gives you the iOS-style frosted-glass effect that has become a UI convention. Use it sparingly: it forces a separate compositor pass, which costs more on low-end devices than designers usually realise.

header {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
}

Honouring user preferences

Backgrounds should respond to two media queries even if nothing else on the page does. prefers-reduced-motion should freeze any animated gradient or scrolling parallax; prefers-color-scheme can drive a theme switch via CSS custom properties without a single line of JavaScript.

:root { --canvas: #0a0a0a; }
@media (prefers-color-scheme: light) { :root { --canvas: #fafafa; } }
body { background: var(--canvas); }

The dark-mode backgrounds page covers theme-token design more thoroughly, and the accessibility guide covers reduced-motion and forced-colours mode.

When CSS is the wrong answer

CSS is not always the right tool. Photographs, hand-tweaked mesh gradients with many control points, and complex generative artwork are all cheaper to ship as a well-compressed image than to recreate in CSS. The defensible rule of thumb is: if the background can be described in fewer than ten gradient stops or a small repeating tile, it belongs in CSS; if it cannot, ship it as WebP or AVIF and use the file formats and resolution guide to size and compress it correctly.

A short checklist

Most of the visual richness on this site's hub pages is built from techniques on this list, so you can inspect any of them in your browser's dev-tools to see the exact stack in use.