CSS pattern backgrounds with two colors (no image files)
Stripes, dots, and grids can come from pure CSS — lightweight, themeable, and easy to get wrong when contrast disappears.
Pattern fills add texture without another HTTP request. Two colors are enough — foreground pattern on a surface color — if you respect legibility.
Pick colors with roles
Surface is the quiet one; pattern is slightly stronger, not louder than body text sitting on top. Busy patterns behind forms are a special kind of regret.
Generate copy-paste CSS
The pattern generator previews stripes, dots, grid, and checker styles. Tweak both colors, copy the background block, drop into your component. Pair with tokens from design tokens in plain CSS so dark mode gets a second pattern pair.