Overview
A generator for tiling background patterns built purely from gradient functions: polka dots, a clean grid, diagonal stripes, a blueprint grid and a zig-zag chevron. You pick foreground and background colors and the tile size from 10 to 80 pixels, watch the pattern fill the preview, and copy the background declarations that reproduce it anywhere.
How It Works
Choose one of the five pattern styles. Pick the pattern color and the background color, and drag the tile size slider. The preview fills a large panel with the repeating pattern at real scale. Copy the CSS, which consists of a background-color, one or more background-image gradient layers, a background-size of your tile dimension, and for the zig-zag a set of four background-position offsets that shift the layers into the chevron arrangement.
Step-by-Step Usage Guide
- Pick the pattern style from the five buttons.
- Set the pattern and background colors.
- Drag the tile size slider to set the repeat unit.
- Copy the background declarations.
Technical Specifications & Standards
Every pattern is background tiling of gradient images. Dots are a single radial-gradient whose first 1.5 pixels are the foreground color and the rest transparent, sized to one tile; the dot radius is fixed, so smaller tiles look denser rather than smaller-dotted. The grid layers two orthogonal linear-gradients, one horizontal and one vertical line per tile. Diagonal stripes use repeating-linear-gradient at 45 degrees, whose repeating cycle makes the declaration independent of tile count. The zig-zag is the most composed: four 135, 225, 45 and 315 degree gradients each painting a quarter of the chevron, offset by background-position pairs at half-tile increments, which is also why all four layers must share one background-size. The blueprint preset ignores your colors and hardcodes its classic dark navy ground with 15 percent white lines.
Targeted Use Cases
- Subtle texture behind hero sections and empty states.
- Graph-paper backgrounds for chart or sketch areas.
- Chevron section fills that echo a brand angle.
- Dot grids for design-tool-like canvases.
Notes & Gotchas
- Keep pattern-to-background contrast low so text on top stays readable.
- Use the largest tile size that still reads as texture; fine tiles shimmer on low-DPI screens.
- Remember blueprint ignores your color choices by design; recolor its hardcoded values after copying if needed.
- Combine the pattern with a solid overlay gradient in your own CSS when content sits on top.
Frequently Asked Questions
Why does the blueprint pattern ignore my colors?
The blueprint preset hardcodes its identity: a #0d2040 background with 15 percent white grid lines, so it looks right regardless of the pickers. Recolor those two values in the copied CSS if you want a custom blueprint.
How does the zig-zag pattern work?
It layers four linear-gradients at 135, 225, 45 and 315 degrees, each painting a quarter of the chevron in a 25 percent band, and offsets them with four background-position values at half-tile steps. All layers share one background-size tile.
Can I control the dot size separately from the spacing?
Not in the current controls: the dot radius is fixed at 1.5 pixels and the tile slider changes only the repeat distance. Edit the first stop of the radial-gradient after copying to change the dot itself.
Do these patterns tile seamlessly?
Yes. Each gradient is periodic over the background-size box, so the pattern repeats without visible seams, which is the advantage of gradient patterns over cropped images.