CSS Background Pattern Generator
Create stripes, dots, grids, checkerboards, zigzags and waves with CSS gradients, or as an SVG data URL. Pick colours and size, copy the code.
CSS
background: repeating-linear-gradient(45deg, #5145e5 0 20px, #ffffff 20px 40px);
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Next steps
Done here? Use the Send to… menu on the result to carry it on to CSS Grid Generator or CSS Minifier.
Free CSS Background Pattern Generator
Make a repeating background with no image files. The patterns are written with CSS gradients, or as a tiny inline SVG if you prefer. It gives developers a quick browser-based way to solve a focused css background pattern generator task before moving the result into a project.
How to use CSS Background Pattern Generator
Pick a pattern, two colours and a size. Copy the CSS and use it as the background of any element.
Common mistakes
- Very small sizes can look noisy or flicker on some screens.
- Forgetting to set a height: an empty element with no height shows no pattern.
Frequently asked questions
Why use gradients instead of an image?
Gradients are tiny, scale to any screen and need no extra request. The SVG option is a small inline image if you prefer that form.
How do I change the pattern size?
Use the size slider. The background-size in the code changes with it.
Can I use it on the whole page?
Yes. Put the code on body or on any element.
Is anything uploaded?
No. The code is built in your browser and nothing is sent to a server.
How do I use this css background pattern generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.
More Frontend & Design
User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back