CSS background pattern generator

.pattern {
  background-color: #eef2ff;
  background-image: repeating-linear-gradient(45deg, #6366f1 0 8px, transparent 8px 24px);
}

How the patterns are made

Every pattern except the pixel tile is drawn by CSS gradients with hard colour stops — a stop where one colour ends at the exact length where the next begins, so there is no fade. The pattern colour is painted over background-color; the rest of each gradient is transparent, so the background shows through. No image is downloaded.

• Stripes — one repeating-linear-gradient(): the pattern colour for the stripe width, then transparent up to the tile size, repeated along the angle (0° runs the stripes across, 90° up and down, 45° diagonally).
• Dots — a radial-gradient(circle, …) in the middle of each tile, repeated with background-size. Polka adds a second copy moved half a tile right and down, so every other row sits between the dots above it.
• Grid — two linear gradients per tile: a line across the top and a line down the left edge.
• Checkerboard — a repeating-conic-gradient() that fills two opposite quarters of a tile twice the square size, so each square is exactly the size you set. The top-left square is the background colour.
• Triangles — a 45° gradient that fills the lower-left half of each tile. Zigzag — four corner triangles, two of them moved half a tile sideways, which join into a zigzag band.
• Pixel grid — your tile drawn as a small SVG (one rectangle per run of filled squares, crisp edges) inside the CSS as a data URI, so it is still one CSS rule with no extra file.

Using it

CSS — add the .pattern class to any element with a size: a page section, a card, the whole body. Tailwind — the same declarations as arbitrary-property classes for Tailwind CSS v4 (spaces become _). Sizes are in pixels, so a pattern looks the same on a phone and a desktop; tiles start at the element's top-left corner. Put text on a pattern only when the two colours are close, or behind a solid panel — busy patterns make text hard to read. For soft colour blends instead of shapes, try the mesh gradient generator; for a wavy edge, the SVG wave generator.

How we test it

122 patterns across all 8 types are checked in Chrome 156. The CSS you copy is pasted on three boxes — wide, square and one with odd-numbered sides — and photographed: 76,167 pixels must be exactly the pattern colour or the background colour as worked out separately from the shape itself (where a stripe falls along the gradient line, how far a pixel is from a dot's centre, which square of the board it is in), with the largest difference 0/255. Pixels on an edge, where the browser smooths the line, are left out. The Tailwind classes, compiled by the real Tailwind CSS, and the preview must give exactly the same background as the CSS. Deliberately broken versions — a mirrored stripe angle, a dot radius read as a diameter, polka without its offset row, a grid with no columns, half-size checker squares, an unshifted zigzag, a pixel tile read sideways, Tailwind classes with spaces left in — must each be caught.

Questions

Why does the tile size have to be even?

Polka and zigzag move a copy of the tile by half its size. With an even size that is a whole number of pixels, so every edge lands on a pixel boundary and nothing blurs.

Can I use more than two colours?

Each pattern here uses one pattern colour over one background. To stack two patterns, put both background-image values in one list (comma-separated) with their sizes in the same order.

Is a CSS pattern faster than an image?

There is nothing to download, and the CSS is a few hundred bytes. The browser draws the gradients itself, which is cheap for a static background; avoid animating large patterned areas.

Can I use the patterns in commercial work?

Yes. They are built in your browser from the shapes, colours and sizes you choose; there is nothing to credit.