Free CSS Background Pattern Generator
Patterns add texture and depth to a page without a single image file. This free generator builds seamless backgrounds from CSS gradients and tiny inline SVGs, so they stay sharp on every screen, load instantly and can be recoloured with one line of code.
24 Seamless Patterns
Choose polka dots, grids, blueprint lines, checkerboards, diamonds, plaid, stripes, hatching, zigzag, chevrons, waves, rings, sunbursts, hexagons, triangles, plus signs, crosses, bricks, stars or grainy noise. Every pattern has its own size, line width and angle controls where they make sense.
Layer Up to Three Patterns
The CSS background property accepts several comma-separated layers. The generator lets you stack three patterns and set a colour, opacity and offset for each one, which is how classic designs like graph paper, tartan and layered dots are made.
Animated Backgrounds
Turn on a direction and the pattern scrolls forever using a background-position keyframe that moves by exactly one tile, so the loop never jumps. A prefers-reduced-motion rule is included for accessibility.
CSS, Tailwind, React or Image
Copy plain CSS, Tailwind arbitrary-value classes, a React style object or a standalone HTML page. Need an image instead? Download a PNG at any size up to 4000 px, or a single SVG tile for design tools. Share your settings with a link.