CSS Pattern Generator
Stripes, dots, grids, checks and zigzags in pure CSS, over a gradient or a solid colour. One background line, no image files, sharp at any size.
Patterns without images
Every pattern here is drawn with gradients. A repeating-linear-gradient makes stripes; a small radial-gradient repeated with background-size makes dots; two thin linear-gradients make a grid; a repeating-conic-gradient makes checks. There is no image to load, it stays sharp on any screen, and changing a colour is one edit.
Layering over a gradient
The lines and dots are drawn on transparent, with the background as the last layer — so a pattern can sit on any gradient. Keep Strength low (15–35%) with white or black lines for a subtle texture behind text; raise it for a bold, graphic look.
Tips
Use sizes that divide evenly, like 8, 16, 24 or 32px, so lines stay crisp. Blueprint draws a major grid every four cells over a fainter minor grid. For a flowing background instead, try the SVG Wave & Blob Generator or the Aurora Background Generator.