CSS Pattern Backgrounds
Pick a pattern, tune it, copy the CSS. Every background here is made of gradients alone, so it weighs a few hundred bytes, themes with CSS variables and stays editable by hand.
Free and browser-based - no sign-up needed. Start the app when you are ready.
Featherweight
A few hundred bytes of text instead of an embedded image - nothing extra to download, nothing to cache.
Themeable
Export with CSS custom properties and re-colour the whole pattern by changing one variable.
Still Editable
The output is readable CSS, so you can tweak a stop or an angle later without regenerating anything.
Layerable
Drop the background colour and dial the opacity down to lay a pattern over a photo, a hero section or another gradient.
About CSS Pattern Backgrounds
CSS Pattern Backgrounds builds repeating backgrounds out of nothing but
CSS gradients. There is no image involved at any point: the browser paints
stripes, checks, dots, zigzags and honeycombs directly from a handful of
linear-gradient, radial-gradient and
conic-gradient layers. What you copy is a short, readable CSS
rule - typically a few hundred bytes - that you can drop into a stylesheet
and keep editing by hand.
Every pattern comes with its own controls. A stripe pattern asks for stripe width, gap and angle; a brick wall asks for brick width, height and mortar thickness; graph paper asks how often a major line should fall. The preview is a real element with the generated CSS applied to it, so what you see is literally the rule you take away, not a picture of it.
Patterns do not have to be opaque. Turning the background transparent
drops the background-color from the rule entirely, so whatever
sits behind the element shows through the gaps, and the opacity slider fades
the pattern itself. That turns any of these into an overlay you can lay on
top of a photo, a hero section or another gradient.
How it works
- Click Start app and pick a pattern - use the arrows to step through, or open the browser to see all of them at once.
- Adjust the pattern's own settings and colors, and make the background transparent or fade the pattern if you want to layer it over something.
- Choose an output format and copy the code, or download it as a
.cssfile.
Output formats
The code panel offers four ways to take the pattern with you: a plain CSS rule, a version using CSS custom properties so the whole pattern can be re-coloured by changing one variable, an inline style attribute for a one-off element, and a React style object ready to paste into a component.
When to use this instead of Pattern Maker
Our Pattern Maker generates seamless patterns as artwork - SVG, PNG, JPG or WebP - and can draw anything, from pineapples to mandalas. Use it when you need an image file, or a motif that gradients simply cannot express. Use CSS Pattern Backgrounds when you want a lightweight background inside a stylesheet: something that costs almost nothing to download, follows your theme variables and can be animated or tweaked later. Both tools are free, and you can browse the rest of our CSS tools too.
Frequently asked questions
Is CSS Pattern Backgrounds free?
Yes, completely free, with no account, watermark or usage limits. The CSS you generate is yours, for any purpose including commercial use.
How is this different from Pattern Maker?
Pattern Maker produces an image - an SVG, PNG, JPG or WebP file, or a CSS rule with that image embedded as a data URI. This tool produces no image at all: the pattern is drawn by CSS gradients, so the output is a few hundred bytes of editable text instead of a few kilobytes of encoded picture. The trade-off is that gradients can only form geometric shapes, which is why this tool has fewer patterns than Pattern Maker.
Do these patterns work in every browser?
Linear and radial gradient patterns work everywhere. A handful of
patterns use conic-gradient, which is supported by all
current versions of Chrome, Edge, Firefox and Safari.
Can I change the colors after copying the code?
Yes. Pick the Variables output format and every color becomes a CSS custom property at the top of the rule - change one value and the whole pattern follows. Even the plain CSS output is readable enough to edit by hand.
Can I put a pattern on top of an image?
Yes. Tick Transparent background and the
background-color disappears from the generated rule, leaving
only the pattern - so an image, a gradient or a section colour behind the
element shows through. The opacity slider fades the pattern on top of it.
A few patterns draw with their background colour rather than just sitting
on it, and for those the option is switched off, since clearing the colour
would erase the pattern.
Are these patterns seamless?
Yes. Each one is a repeating gradient or a tile repeated by
background-repeat, so it covers any size of element without
visible seams.
Is anything uploaded to a server?
No. The pattern is generated and previewed entirely in your browser; nothing is stored when you close the page.