What Are CSS Background Patterns and How Do You Use Them?

CSS background patterns are decorative backgrounds built entirely from CSS — typically layered linear-gradient() and radial-gradient() functions plus background-size — rather than from image files. You use them by copying a snippet and applying it to an element's background or background-image. They suit anyone who wants texture, depth, or brand color in a UI without adding image requests or editing a graphics file; if you need photographic or highly irregular artwork, a CSS pattern is the wrong tool.

How CSS patterns differ from image backgrounds

An image background is a file (PNG, JPG, SVG) that the browser downloads and tiles or scales. A CSS pattern is a set of gradient functions the browser renders at paint time.

The practical consequence: CSS patterns are cheap to theme and scale, but they are limited to what gradients can express — stripes, grids, dots, glows, meshes, and similar geometry.

The core techniques

Almost every CSS pattern is one of these building blocks, or a stack of them.

Linear gradients for stripes and grids

linear-gradient() produces a color transition along a straight line. With hard color stops (two stops at the same position) you get a crisp edge instead of a fade, which is how stripes are made:

.stripes {
  background-image: linear-gradient(
    45deg,
    #1e293b 25%, #0f172a 25%,
    #0f172a 50%, #1e293b 50%,
    #1e293b 75%, #0f172a 75%
  );
  background-size: 40px 40px;
}

Two gradients crossed at different angles give you a grid; repeating-linear-gradient() does the same job with fewer stops.

Radial gradients for dots and glows

radial-gradient() radiates from a center point. A small circle repeated by background-size becomes a dot grid; a large soft circle becomes a corner glow or spotlight.

.dots {
  background-image: radial-gradient(#334155 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

background-size is what makes it repeat

A single gradient fills the whole element. Setting background-size to a small value (like 20px 20px) shrinks the gradient tile so the browser repeats it — that repetition is what turns one gradient into a pattern. Change the size and the pattern's density changes; change the stops and its shape changes.

Layering multiple gradients

background-image accepts a comma-separated list. Earlier layers paint on top of later ones, so you can stack a dot layer over a base gradient, or combine two directional gradients for a mesh look. Each layer can have its own background-size and background-position when you use the longhand properties.

Applying a snippet to your project

1. Pick a pattern. Browse a library such as Pattern Craft, which lists patterns by category (Gradients, Geometric, Decorative, Effects) with a live preview and a copy button for each. Hover on desktop or tap on mobile to reveal the Preview and Copy options.
2. Copy the code. The snippet is ready-to-use CSS (the library also offers Tailwind-oriented output for projects using Tailwind).
3. Paste it onto the target element. Apply it to a div, section, body, or any element with a defined size:

.hero {
  background-image: radial-gradient(#334155 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

4. Verify. The element should show the repeating pattern immediately. If nothing appears, the element likely has zero height (an empty div with no content or explicit height) or the pattern is hidden behind an opaque child.

Adjusting size, position, and color

• Density: change background-size. Smaller values = tighter pattern.
• Alignment: use background-position to shift where the tile starts, useful when a pattern must line up with a border or logo.
• Color: replace the hex values in the gradient stops. If the pattern uses a CSS variable, override the variable instead of editing each stop.
• Responsiveness: patterns scale with the element, so most need no media queries. If a pattern looks too dense on small screens, increase background-size inside a @media block.

Common snags

• Pattern invisible: the element has no height, or a child with a solid background covers it.
• Pattern looks blurry or banded: very small background-size values can alias on some displays; nudging the size up usually fixes it.
• Text unreadable over the pattern: add a semi-transparent overlay layer or a solid background behind the text rather than removing the pattern.

Where to get ready-made snippets

Libraries and generators exist so you don't hand-write gradient math. Pattern Craft (patterncraft.fun) hosts a library of 250+ patterns and gradients with one-click copy, live preview, and categories including Gradients, Geometric, Decorative, and Effects; it states the library is 100% free and offers both plain CSS and Tailwind output. Other sources include CSS gradient generators and pattern galleries — the workflow is the same: preview, copy, paste, then tune background-size and colors to fit your layout.

If you're building a one-off hero, a generator is faster. If you're maintaining a design system, copy the pattern into your own stylesheet as a reusable class or CSS variable so the whole product stays consistent.