A CSS pattern generator built on pure gradients
This CSS pattern generator creates repeating background patterns — stripes, polka dots, grids, checkerboards, zigzags, waves, hexagons, isometric cubes, carbon fibre and graph paper — using nothing but CSS gradients. There are no image files to host, the patterns stay sharp on any screen density, and every colour and size is one variable away from a dark-mode or brand variant.
Pick a pattern, adjust the pattern colour, background colour, opacity, size, line weight and rotation, and the preview and code update as you go. Copy the CSS into a hero section, a card, a slide or an empty-state illustration. When you need an image instead — for a design tool, an email or a presentation — download a seamless SVG tile or a larger PNG swatch drawn from exactly the same geometry.
How to use the CSS Pattern Generator
- Choose a pattern from the grid of thumbnails (arrow keys move between them).
- Set the Pattern colour and Background colour with the colour pickers or type HEX codes, and lower Pattern opacity for a subtle texture.
- Drag Size to change the tile, Weight for line thickness or dot size, and Rotation to turn the whole pattern.
- Press Copy CSS and paste it into your stylesheet, renaming
.patternto your own selector. - For an image, choose Single seamless tile or Swatch and press SVG or PNG.
CSS Pattern Generator features
Ten gradient recipes
Linear, radial and conic gradients layered with hard colour stops, each with sensible default colours you can change.
Faithful SVG export
The SVG is generated from the same layer list as the CSS — linear and radial layers become SVG gradients with the identical gradient line, conic layers become exact sectors — so the tile matches the preview.
Rotation that works for any pattern
At 0° you get a plain background. Any other angle produces a rotated ::before layer, and the SVG swatch uses patternTransform.
Opacity without extra layers
The pattern colour is written as rgba() so the background colour shows through; the SVG uses matching stop-opacity.
Thumbnails and keyboard support
Each pattern shows a live thumbnail and the picker works with arrow keys.
How CSS gradient patterns work
A gradient with hard stops — two colours meeting at the same position, such as #7c5cff 0% 25%, transparent 25% 50% — paints a sharp band instead of a blend. Give that gradient a small background-size and the browser repeats it across the element like wallpaper. Stack several gradients in one background-image, offset them with background-position, and you can build surprisingly complex shapes: two 45° and two 135° triangles make a zigzag; two dots offset by half a tile make polka dots; a conic gradient with alternating quarters makes a checkerboard.
Because the shapes are calculated, not stored, they cost almost nothing to download and scale perfectly. The trade-off is that very complex patterns use many layers, and soft edges can show slight aliasing at small sizes — round the size to whole pixels for the crispest result.
The patterns at a glance
| Pattern | Gradients used | Weight controls |
|---|---|---|
| Stripes | 1 linear at 45° | Stripe width as % of the period |
| Polka dots | 2 radial, offset half a tile | Dot radius |
| Grid | 2 linear (horizontal + vertical) | Line thickness |
| Checkerboard | 1 conic in quarters | — |
| Zigzag | 4 linear triangles | — |
| Waves | 1 radial ring | Wave line thickness |
| Hexagons | 6 conic 120° wedges | — |
| Isometric | 6 linear (30°, 150°, 60°) | — |
| Carbon | 4 radial with a soft sheen | Fibre size |
| Graph paper | 4 linear, major + minor lines | Major line thickness |
Tips for using background patterns
- Keep text readable: patterns behind copy should be low-contrast or low-opacity. Check the text against both pattern colours with the Contrast Checker.
- Fade a pattern out by adding a gradient on top, for example
linear-gradient(transparent, #fff)as the first layer — the Gradient Generator builds those. - For organic colour blends rather than geometry, try the Mesh Gradient Generator.
- Respect motion and print: patterns are static, but disable heavy ones in print stylesheets to save ink.
CSS Pattern Generator FAQ
Is a CSS pattern better than an image?
For simple geometric patterns, usually yes: the CSS is a few hundred bytes, needs no extra HTTP request, scales to any resolution and can be recoloured with variables. Photographic or hand-drawn textures still need images.
Which browsers support these CSS patterns?
All current browsers support linear, radial and conic gradients and the two-position colour stop syntax used here (Chrome, Edge, Firefox and Safari since 2020). Internet Explorer is not supported.
How do I make the pattern seamless in Figma or Photoshop?
Download the SVG as a Single seamless tile and use it as a repeating image fill. Its width and height match the CSS background-size, so edges line up exactly.
Why does the rotated CSS use a ::before element?
CSS cannot rotate a background image on its own. The generator places the pattern on an oversized pseudo-element, rotates it and clips it with overflow: hidden, so your content stays upright.
Can I animate a CSS pattern?
Yes — animate background-position by one tile size with a keyframe animation for a moving pattern, or use the CSS Animation Generator to build the keyframes.
Is anything uploaded when I use the CSS pattern generator?
No. The CSS, SVG and PNG are all generated by your browser on your device.