How to use
- Select a pattern type: striped, dots, checkered or zigzag.
- Set the main color, the accent color and the size in pixels.
- Look at the preview, then copy the CSS with the copy button.
This generator makes repeating patterns with CSS gradients only, so there are no image files to host. The Main Color is the base background, and the Accent Color is used for the stripes, dots or squares drawn over it. Size is in pixels, from 10 to 100, and it controls how large each repeat is.
Striped creates diagonal lines at 45 degrees, with each stripe half the size value. Dots draws small circles on a grid. Checkered produces a two-tone checkerboard. Zigzag creates a repeating triangle wave. Each type returns a few lines of CSS that set a background color, a background image made of gradients and, where needed, a background size and position.
To use a pattern, paste the copied declarations into the rule of any element, for example a container or the body. You can then change the colors or the size in your own stylesheet. Because the patterns are built from gradients, they scale cleanly and add no extra network requests.
Everything is generated in your browser, and nothing is uploaded.
FAQ
Which patterns are available?
Striped, dots, checkered and zigzag.
Do I need image files?
No. The patterns use CSS gradients, so there are no images to host or load.
What does the size control change?
The dimension in pixels of one repeat of the pattern. Larger values give a bigger pattern.
Can I use the CSS on any element?
Yes. Paste the declarations into the rule of any element where you want the background.
Is my input uploaded?
No. The CSS is built in your browser.