CSS Pattern Builder
Start with a circle, add a line, make a rectangle wide. Every layer is a CSS gradient with its own colour, spacing and blend mode, and the whole stack comes out as one background rule - no images, no data URIs.
Free and browser-based - no sign-up needed. Start the app when you are ready.
Yours, Not a Preset
Nothing here is a finished pattern. You compose one from parts, so the result is not something a hundred other sites are already using.
Blend Modes
Every layer can multiply, screen or overlay onto the ones below, which is how two plain lattices turn into a third thing neither of them was.
Featherweight
A stack of gradients is still just text - a few hundred bytes instead of an embedded image, with nothing extra to download.
Still Editable
The output is readable CSS with one entry per layer, so you can adjust a colour or a spacing later without coming back here.
About the CSS Pattern Builder
Most pattern tools hand you a finished pattern and let you recolour it. This one hands you the parts. You start with an empty canvas, drop a circle on it, decide how big it is and how far apart the copies sit, then add a line family underneath and a wide rectangle on top. Each of those is a layer, and the layers together are your pattern - one nobody else has, because you built it rather than picked it.
Every building block is a CSS gradient with a transparent ground, which is
what makes stacking possible at all: whatever a layer does not paint, the
layers below show through. The output is a single background
rule of a few hundred bytes. There is no image anywhere in it, nothing to
download alongside your page, and nothing stopping you from editing a colour
by hand a month later.
How it works
- Click Open CSS Pattern Builder. You start on a small stack - a ground, some diagonal lines and a dot lattice - so there is something to take apart.
- Add a layer and pick a block. The browser groups them into grounds, lines and grids, circles, rectangles, triangles and marks, and you can search by name.
- Tune the selected layer. Every block has its own settings - a circle has a size, a line has a thickness and an angle, a triangle has a direction - on top of the colour, opacity, spacing, offset and blend mode that every layer has.
- Drag the preview to place the selected layer. The pattern follows the pointer pixel for pixel, and the offset sliders keep up as you go; hold Shift to stay on one axis. Blocks that carry their own centre, like the grounds and the ray burst, have nothing to place and do not respond.
- Drag a layer by its grip to reorder the stack - the topmost layer is the one in front. Hide a layer to see what it was doing, or duplicate one and set its offset to 50% to interleave the copy with the original. The offset runs half a repeat either way, so the two ends of the slider land on the same place.
- Copy the code, or download it as a
.cssfile. Press R for a whole random stack, V to vary the one you have, A to add a layer and C to copy.
How layered CSS backgrounds actually work
CSS has allowed more than one background on an element for years, and the
mechanism is simply a comma-separated list. background-image
takes several gradients, and background-size,
background-position and background-blend-mode each
take a matching list that lines up with it, entry by entry. The first entry
is the top layer - backgrounds stack towards the viewer in reading
order, which is the opposite of what most people guess the first time.
Two details make hand-writing this harder than it looks, and both are handled for you here. The first is that one motif is often several gradients: a plus sign is two rectangles, brick coursing is three lines, a pill is a bar with a disc at each end. The second is that CSS cycles a short list rather than leaving the remaining layers alone - give five images and two sizes, and the third image quietly takes the first size back. That is the single most common reason a hand-built stack falls out of register, and it is why the builder always writes every list out to full length.
The background-color sits underneath all of it, and it is a
colour rather than a layer, so it never takes part in the lists. Turning it
transparent leaves the stack floating over whatever is behind the element,
which is how you lay a pattern over a photo or a hero section.
What gradients can and cannot draw
Being honest about the medium saves you an afternoon. Gradients only ever add to each other - there is no way to make one cut a hole in another - so every shape here is either something a gradient draws directly or a union of several. A ring is one radial gradient with its middle left clear; a frame is four bars, not a square with the centre removed. Shapes that genuinely need subtraction, like a five-pointed star or an outlined diamond, are not in the library, because a gradient cannot make one.
The other limit is rotation. An individual background layer cannot be turned - CSS has no per-layer transform - so the blocks that rotate are the ones whose own gradient has an angle: lines, stripes, crosshatch and the ray burst. A lattice of dots or squares cannot be tilted thirty degrees, however much you might want it to. Where a direction genuinely matters, the block offers it as a choice instead: triangles point four ways, arcs open four ways, half circles sit on any edge.
Within those limits there is a lot of room. Blend modes in particular do
more than they look like they will: two plain dot lattices at different
spacings, one set to multiply, produce interference patterns
that neither layer contains on its own.
When to use this instead of our other pattern tools
CSS Pattern Backgrounds is the opposite end of the same idea: dozens of finished gradient patterns you pick from and tune. Go there when you want a good background in thirty seconds and you do not care whether anyone else has used it. Come here when you want something specific, or something nobody else has.
Pattern Maker works in images rather than CSS. It draws seamless SVG, PNG, JPG or WebP tiles and can render motifs no gradient could express - pineapples, mandalas, anything with a curve that does not come from a circle. Use it when you need a file, or a shape this tool's honest limits rule out.
Frequently asked questions
Is the CSS Pattern Builder free?
Yes, completely free, with no account, watermark or export limit. You do not sign in to copy your own pattern. The CSS you generate is yours, for any purpose including commercial work.
How do I layer multiple background patterns in CSS?
Comma-separate the values. background-image accepts
several gradients at once, and background-size,
background-position and background-blend-mode
each take a matching list. The first image in the list is the topmost
layer. The catch is that a list shorter than the image list gets cycled
back to its start rather than ignored, so every list has to be written out
in full - which is what this tool does for you.
Can I rotate a single layer?
Not in CSS, and not in any tool that claims otherwise - there is no per-layer transform for backgrounds. What can turn is a gradient's own angle, so the line, stripe, crosshatch and ray blocks have an Angle control. Lattices of dots, squares or triangles cannot be tilted; where orientation matters, those blocks offer a direction to choose instead.
How many layers can I use?
Eight. That is not a browser limit - CSS will take far more - but past eight the lower layers are buried, and the four parallel comma lists get long enough that the output stops being something you would want to edit by hand. If you need more, the honest answer is that you probably want an image, which is what Pattern Maker makes.
Do layered gradient backgrounds hurt performance?
Far less than the image they replace. There is no extra network request, nothing to cache and nothing to decode, and the whole rule is typically a few hundred bytes of text. A browser rasterizes gradients on the GPU and caches the result, so a static stack costs nothing after the first paint. Very large blurred gradients on an element that is constantly resizing are the one case worth measuring.
Will the pattern still look right on a high-DPI screen?
Yes. Gradients are drawn at the device's own resolution rather than scaled up from a bitmap, so a hairline stays a hairline on a retina display instead of going soft. That is one of the real advantages over an exported PNG tile.