CSS Repeating Pattern Generator

CSS patterns: repeating backgrounds without images

A CSS pattern is a repetitive background built entirely with CSS gradients, no image file required. The technique was popularised by Lea Verou in her landmark 2010 CSS3 Patterns Gallery and has been a part of the web design vocabulary ever since. Because the pattern is rendered by the browser's native paint pipeline, it is resolution-independent, comically small in bytes and scales sharply on retina screens without serving multiple raster assets.

The two building blocks are linear-gradient and radial-gradient, each supporting a repeating- variant that does the tiling for you. Diagonal stripes, for example, are a one-liner:

background:
  repeating-linear-gradient(45deg,
    #ffffff 0 10px,
    #1f2937 10px 20px);

Common pattern recipes

• Stripes — one repeating-linear-gradient, any angle.
• Checkerboard — two linear-gradients rotated 90° with background-size defining the cell.
• Dots / polka dots — a single radial-gradient with background-size for spacing.
• Plus / cross — two thin linear-gradient stripes overlapped at 90°.
• Diamond / herringbone — gradient stacks with offset background-position.
• Grid lines — perfect for design canvases; one gradient horizontal, one vertical.
• Conic / pie — modern conic-gradient for sunbursts and pies.

CSS pattern vs SVG vs PNG

For simple geometric tiles — stripes, dots, grids, checkers — pure CSS wins on every axis: no HTTP request, scales perfectly, easy to tweak via custom properties. SVG takes over when the motif involves curves, paths or complex shapes (waves, hexagons with rounded corners, custom icons), and dedicated galleries like heropatterns.com live in that space. A repeated PNG is rarely the right answer in 2026 — it loses sharpness on retina, costs an HTTP request and is bigger than the equivalent CSS in almost every case.

Working with transparency and custom properties

Gradients accept rgba() and color-mix() values, so you can paint a pattern over a photographic background while keeping the imagery readable. Plugging the colours into CSS custom properties makes themes trivial:

.dots {
  --c: #3b82f6;
  background: radial-gradient(var(--c) 2px, transparent 2px);
  background-size: 16px 16px;
}

Tailwind and arbitrary values

Tailwind v3+ supports arbitrary value syntax for any utility. You can drop a pattern straight into the class list:

<div class="bg-[radial-gradient(theme(colors.blue.500)_2px,transparent_2px)] bg-[length:16px_16px]"></div>

FAQ

Can a CSS pattern use transparency? Yes — gradients accept rgba(), so you can lay a pattern over a photo or a gradient without hiding the layer below.

Does it print correctly? Mostly — most browsers respect background printing if the user enables "Background graphics". For brochures, use print-color-adjust: exact to keep the pattern visible.

Is it lighter than a repeated PNG? Almost always — a CSS pattern is a few dozen bytes inside your stylesheet and produces no HTTP request, while a PNG tile costs at least a kilobyte plus a request.

Can I make hexagonal or complex curved patterns? Hex is possible with three stacked gradients, but anything with smooth curves is better served by an SVG tile from heropatterns.com or a similar gallery.