Patterns built from gradients, not images
No image request, nothing to resample, crisp at any zoom — with the text contrast measured over the pattern rather than the background.
Patterns built from gradients, not images
No image request, no resampling, crisp at any zoom. Ten repeating backgrounds with the tile size and line weight under your control.
Suppress it when the page prints
A background pattern that reads as a light texture on screen behaves quite differently on paper. Most browsers omit backgrounds when printing by default, which is usually the right outcome — but where a pattern has been applied in a way that does print, it costs a surprising amount of ink for something nobody wanted, and it reduces the contrast of the text sitting on it.
The safe arrangement is to state the intent rather than rely on the default: a print stylesheet that sets the background to none and the text to solid black. This matters most on pages people genuinely print — invoices, receipts, worksheets, checklists — where the on-screen texture is decoration and the printed page needs to be as legible and as cheap to produce as possible.
Why the tile size has to divide the pattern
A repeating background works by tiling one cell edge to edge, so the cell has to be self-consistent: whatever leaves the right-hand edge must arrive at the left, and the same vertically. Where it does not, the join shows as a visible seam ruled across the page at regular intervals, and it is the kind of thing that is invisible while you are working at one zoom level and glaring at another.
Gradient-based patterns mostly sidestep this, because the geometry is generated from the tile's own dimensions and stays aligned to them by construction. The place it still bites is when background-size is changed without the stop positions changing with it — the pattern is then being drawn for one cell size and tiled at another, and the mismatch appears exactly at the boundary. If a seam shows up after a resize, that is where to look rather than at the colours.
Why gradients rather than an SVG
A repeating gradient costs no network request, cannot fail to load, and is resolution-independent — there is nothing to resample when the page is zoomed or shown on a dense screen.
The trade is that gradients cannot express arbitrary shapes. For anything beyond stripes, dots and grids an SVG pattern is the right tool, and the SVG generators here produce one.
Text over a pattern is the risk. The effective contrast is the text against the pattern's own colour, not against the background — the worst case, not the average. A ratio computed against the background alone is optimistic and wrong.
Keep the amplitude low
A pattern behind content works when it is barely there. At full opacity it competes with everything on top of it, and the first thing it costs is the legibility of body text.
Dropping the pattern opacity to 0.06 or so usually gives the texture without the cost, and the contrast figure above will show the difference immediately.
Reduced motion does not cover patterns
A static high-frequency pattern — tight stripes especially — can cause visual discomfort and, rarely, worse. There is no media query for it. Keeping the tile above about 12px and the contrast modest is the practical mitigation.