How to make a seamless pattern or noise texture
- Choose a pattern: noise (film grain), dots, grid lines, stripes, checkerboard, zigzag, plus signs or waves.
- Pick the background and pattern colors, then adjust the tile size and strength.
- Download the seamless tile for CSS or a game texture, or a full wallpaper at HD, QHD or phone size. Or copy ready-made CSS with the tile embedded.
Why add noise?
A little grain makes flat digital colors and gradients look richer and less "plastic", hides color banding in large gradients, and gives designs a printed, analogue feel. Keep the strength low (5–15%) for a subtle texture on website backgrounds, or go higher for a vintage look. Noise tiles are 128 × 128 pixels and repeat seamlessly; press New random noise for a different grain.
Using patterns in CSS
The copied CSS sets background-image to the tile as a data URI and background-size to the tile size, so the pattern repeats with no extra files and no network request. Geometric patterns are designed so their edges line up, which means they tile without visible seams at any size. For sharp results on high-resolution screens, choose a larger tile size and scale it down in CSS.
All textures are generated in your browser with the Canvas API, and you can use them anywhere, including commercial projects.
What does seamless mean?
The right edge matches the left and the top matches the bottom, so repeated tiles join without visible lines.
How do I add grain over a gradient?
Use two backgrounds in CSS: the noise tile first, then the gradient, e.g. background: url(noise.png), linear-gradient(...), with a low noise strength.
Will a noise background slow my site down?
No. A 128 px tile is only a few kilobytes and is decoded once.