Patterns made of gradients
Every pattern here is built from gradient functions rather than an image file. A repeating linear gradient with hard colour stops produces stripes. Two of them crossed at opposing angles produce a crosshatch. A radial gradient tiled by background-size produces dots.
The advantage is not cleverness — it is that a few hundred bytes of CSS replaces a request, a cache entry and a fixed resolution. A gradient pattern stays sharp on any display density, and the colours can be changed in a custom property rather than in an image editor.
The [msm_tool slug="css-pattern-generator"] writes the declarations; the thing worth knowing is that they only work together.
Copy the background-size with it
This is the single most common failure. background-image without its background-size gives you one enormous gradient stretched across the whole element instead of a repeating tile.
The size is the tile. Change it and the pattern's scale changes; omit it and there is no pattern at all, just a very large gradient. Patterns built from more than one layer also emit a background-position, which offsets the second layer to interlock with the first — leave that behind and a check becomes stripes.
Hard stops are what make a pattern rather than a blend
Two colour stops at the same position produce a colour change with no transition. That is the entire mechanism: a gradient with soft stops is a blend, and the same gradient with the stops doubled up at identical positions is a stripe.
Understanding that turns the gradient functions into a general shape tool. Once you can place a hard edge, you can build chevrons, checks, diagonals and grids from the same three functions.
Keep the contrast low
A pattern sits behind content. Anything strong enough to be interesting on its own is strong enough to make text on top of it hard to read.
The practical test is to squint at it: if the pattern is still clearly legible as a pattern, it is probably too strong for a background. Two colours a few percent apart in lightness is usually the right order of difference, and a pattern you have to look for is doing its job.
If text must sit over something bolder, put a solid or near-solid panel behind the text rather than weakening the pattern until it is pointless.
Small tiles can shimmer
A very fine grid or stripe interferes with the display's pixel grid and flickers when scrolled — a moiré effect. It is most visible on high-density screens and on patterns with a tile size close to a small number of physical pixels.
If a pattern looks unstable in motion rather than at rest, increase the tile size. There is no way to fix it at the same scale.
A pattern is decoration
It carries no meaning to a screen reader and should never be the only thing distinguishing one region from another. If a striped background is how you signal that a table row is selected, or that a section is different in kind, add something a reader can perceive by other means — a border, a heading, a label.
Where they earn their place
- Section backgrounds that need a little texture without an image request.
- Placeholder and empty states, where a diagonal hatch reads as "nothing here yet" without needing an illustration.
- Disabled or unavailable regions, where a faint hatch is a widely understood convention — paired with a label, per the point above.
- Print-friendly fills, since a pattern distinguishes areas on a black-and-white printout where colour does not.
Performance
Cheap to paint and cheap to ship. The one caveat is very large elements with very small tiles, where the browser is repeating a gradient a great many times — noticeable only at extremes, and fixed by increasing the tile size, which you probably wanted to do anyway.