CSS Pattern Generator
Create seamless CSS background patterns — stripes, dots, checkerboard, grids and more — with two colors and adjustable size, all pure CSS gradients. Free.
💡 About CSS patterns
- These backgrounds are pure CSS gradients — no image files, and they stay sharp at any scale.
- Adjust the two colors and the tile size to fit your design.
- Apply the
background(andbackground-size) to any element.
Free CSS Pattern Generator
Create seamless CSS background patterns and copy the code in one click. Choose from stripes, dots, checkerboard, grids, and more, set two colors and the tile size, and preview it live — all with pure CSS gradients, no image files. Free, no sign-up, runs in your browser.
What is a CSS pattern?
A CSS pattern is a repeating background built entirely from gradients rather than an image file. Using linear, radial, and conic gradients with background-size, you can create stripes, polka dots, checkerboards, grids, and geometric textures directly in code. Because there is no image to download, patterns load instantly, stay perfectly crisp at any zoom, and can be recolored by changing a single value.
How to use the pattern generator
It is instant:
- Pick a pattern style — stripes, dots, checkerboard, grid, and more.
- Choose the foreground and background colors.
- Adjust the tile size to make the pattern denser or larger.
- Copy the background CSS and apply it to any element.
How CSS gradient patterns work
The trick is repetition. A repeating-linear-gradient creates stripes by alternating colors at fixed intervals, and setting an angle makes them diagonal. Dots and grids use a small gradient tile combined with background-size so it repeats across the element. Checkerboards use a repeating-conic-gradient. Each pattern is just a compact background declaration, sometimes paired with a background-color and background-size, which this tool assembles for you.
Where to use background patterns
Subtle patterns add texture without the weight of an image: a faint grid behind a hero section, soft diagonal stripes on a card, or light dots as a section divider. They work well as low-contrast backgrounds that sit behind content, or as bold decorative panels. Because they are vector gradients, the same pattern looks sharp on a phone and a 4K monitor alike, and you can scale it by adjusting one size value.
Keeping patterns readable
A background pattern should never fight the content on top of it. Keep the two colors close in value for anything sitting behind text, so the contrast between your text and the background stays high. Reserve bold, high-contrast patterns for purely decorative areas with no overlaid text. If a pattern feels busy, increase the tile size or lighten the foreground color to calm it down.
Pro tip
Store your pattern's colors as CSS variables so you can recolor every patterned surface at once, and reuse the same tile size across sections for a consistent rhythm. For solid-color gradients behind the pattern or as an alternative, our CSS Gradient Generator complements this tool.
FAQ
Is this CSS Pattern Generator free?
Are CSS patterns better than background images?
How do I make the pattern bigger or smaller?
How do I apply the pattern to an element?
Can I use a pattern behind text?
Do CSS gradient patterns work in all browsers?
How do I recolor a pattern later?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Flexbox Generator for a faster SEO workflow.