Background Patterns – 8 Free CSS, Bootstrap & Tailwind Sets
Background Patterns is a free pack of eight sets of CSS background patterns, designed and maintained in-house by uiCookies. It covers the patterns people actually use: geometric dots, grids, stripes and checkerboards in pure CSS gradients, subtle paper and noise textures, mesh and blurred gradients, original SVG drawings such as topography and circuit boards, animated gradients, blobs, aurora and starfields, full sections with content on top, a dark set and a set built on newer CSS like @property, color-mix() and light-dark(). Every pattern is a class you can drop on any element and re-theme with custom properties for colour, ground, size and opacity, and every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 and Tailwind CSS 4.
A good background pattern stays behind the content. It is painted on a separate layer, so turning its opacity down never fades the text on top, and it is checked against the text that will sit on it: at the brightest point of the pattern, not on average. When the pattern is busy, a scrim or a mask clears the area behind the copy. SVG patterns work best as masks, because a data URI cannot read CSS variables but a mask can be filled with any colour. And animated backgrounds should move only transform and opacity, so they cost the browser almost nothing, stop under prefers-reduced-motion and give people a way to pause them.
