Why You Are Here
A flat background color is safe and a little boring. A background image adds texture but costs you an HTTP request, a few dozen kilobytes, and a decision about what happens on a retina display. CSS patterns sit between the two: real visual texture for a few hundred bytes of code that stays sharp at any resolution and any element size.
The catch is that writing them by hand is genuinely awkward. A polka dot pattern is a radial gradient with a hard stop and a carefully matched background-size. A checkerboard needs two layered gradients offset against each other by exactly half the tile. Getting the numbers right involves a lot of saving, refreshing, and squinting. That is what a generator solves.
The first situation is adding subtle texture to a section. A hero, a pricing table, a testimonial band: somewhere the flat color feels empty but a photograph would be too loud.
The second is functional patterns. Graph paper grids behind a canvas or diagram editor, the checkerboard that signals transparency in an image tool, ruled lines behind a notes interface. These are patterns doing a job, not just decoration.
The third is replacing an existing image tile. You inherited a site loading a 40KB seamless tile PNG, and the same effect is achievable in four lines of CSS.
What This Tool Does
The CSS Background Pattern Generator gives you a library of seamless patterns with visual controls for customising each one.
Choose a pattern type, adjust the colors, scale, spacing, and line weight, and watch a live preview update as you work. When it looks right, copy the generated CSS and paste it into your stylesheet.
How CSS Patterns Actually Work
Understanding the mechanism means you can modify the generated code rather than being limited to what the presets produce. There are two approaches, and knowing which one you are looking at explains most of the CSS you will see.
Approach one: a repeating gradient
repeating-linear-gradient() and repeating-radial-gradient() tile themselves automatically. You define one cycle using color stops, and the browser repeats it infinitely along the gradient line. No background-size is needed.
background: repeating-linear-gradient( 45deg, #8B5CF6 0 10px, #EC4899 10px 20px ); /* At 45 degrees: purple from 0 to 10px, pink from 10 to 20px, then start over. The result is diagonal stripes. */
Approach two: one tile plus background-size
A normal linear-gradient() or radial-gradient() draws a single shape. Setting background-size defines how big one tile is, and the default background-repeat tiles it across the element.
background-color: #ffffff; background-image: radial-gradient(#8B5CF6 2px, transparent 2px); background-size: 24px 24px; /* Draws one 2px dot inside a 24px square, then repeats it. Change background-size and the dots spread further apart without changing size. Change the 2px and the dots grow without changing spacing. */
The three concepts that unlock everything else
Hard stops make shapes
A gradient with two colors at the same position produces a sharp edge instead of a blend. #8B5CF6 2px, transparent 2px means solid purple up to 2 pixels, then nothing: a crisp circle, not a fuzzy glow.
Multiple backgrounds layer
Comma-separated background images stack, with the first one listed sitting on top. A grid is simply horizontal lines layered over vertical lines.
Background-position offsets layers
A checkerboard is the same gradient twice, with the second copy shifted by half a tile.
Pattern Recipe Reference
The core patterns and the CSS behind each. Colors are placeholders. Swap in your own.
Polka dots
background-color: #ffffff; background-image: radial-gradient(#8B5CF6 2px, transparent 2px); background-size: 24px 24px;
Grid / graph paper
background-color: #ffffff; background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px); background-size: 24px 24px;
Horizontal stripes
background: repeating-linear-gradient( 0deg, #8B5CF6 0 10px, #EC4899 10px 20px );
Diagonal stripes
background: repeating-linear-gradient( 45deg, #8B5CF6 0 10px, #EC4899 10px 20px );
Checkerboard
background-color: #ffffff; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%), linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%); background-size: 40px 40px; background-position: 0 0, 20px 20px;
Cross-hatch
background-image: repeating-linear-gradient(45deg, #e5e7eb 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, #e5e7eb 0 1px, transparent 1px 12px);
Concentric rings
background: repeating-radial-gradient( circle at center, #8B5CF6 0 10px, #EC4899 10px 20px );
Ruled notebook lines
background-color: #fffef7; background-image: repeating-linear-gradient( #fffef7 0 27px, #d1d5db 27px 28px );
Pattern Use Case Reference
| Pattern | Typical Use | Suggested Contrast |
|
Fine dots |
Subtle section texture |
Very low, barely visible |
|
Large dots |
Playful hero backgrounds |
Medium |
|
Grid |
Canvas, diagram, and dashboard backgrounds |
Low |
|
Graph paper |
Design tools, plotting interfaces |
Low |
|
Diagonal stripes |
Warning bands, progress bars, accents |
Medium to high |
|
Horizontal stripes |
Retro or editorial section dividers |
Medium |
|
Checkerboard |
Transparency indicator in image tools |
Low |
|
Cross-hatch |
Textured panels, print-style backgrounds |
Low |
|
Concentric rings |
Radial focal points, decorative headers |
Medium |
|
Ruled lines |
Note-taking and writing interfaces |
Very low |
Accessibility Considerations
This is the part most pattern tools skip entirely, and it matters more than the pattern choice itself.
WCAG requires a 4.5 to 1 contrast ratio for normal text. A pattern means the background behind your text alternates between two colors. Your text must clear the threshold against the lighter AND the darker parts of the pattern, not against their average. The safest approach is keeping any pattern behind text extremely low contrast, so the two pattern colors are close enough that either one passes.
Tightly repeating parallel lines in high contrast are a known trigger for visual discomfort, dizziness, and in some cases seizures in photosensitive individuals. They also produce moire interference when they interact with a screen's pixel grid, which is why fine stripes sometimes appear to shimmer during scrolling. Keep repeating stripes either widely spaced or low contrast, and avoid animating them.
Always declare background-color alongside your pattern. If the pattern fails to render for any reason, the text still has a defined background to sit against rather than falling through to whatever is beneath.
Performance — The Honest Version
Most tools tell you CSS patterns are simply faster than images. The file size argument is real, but it is not the whole picture.
| Performance | Details |
|
Where CSS patterns clearly win |
File size, typically a few hundred bytes against several kilobytes for a seamless tile. No additional HTTP request. Perfect sharpness at any resolution with no retina variant needed. Colors changeable by editing one line rather than regenerating an asset. |
|
Where they can cost you |
The browser rasterizes gradients at paint time. A single simple pattern is negligible. Several layered repeating gradients stretched across a full-viewport element can become measurably expensive, particularly during scroll and particularly on lower-end mobile devices. Adding background-attachment: fixed to a patterned element is especially costly because it forces repainting as the page scrolls. |
|
Practical guidance |
For typical patterns on typical elements, use CSS without hesitation. If you are layering four or more gradients across a full-page background, or combining a pattern with fixed attachment or animation, profile it on a mid-range phone before shipping. |
Common Mistakes to Avoid
Most pattern recipes draw shapes over transparency, meaning the gaps between the dots or lines are see-through rather than white. Without an explicit background-color, whatever sits beneath the element shows through the gaps, which is rarely what you intended and often produces an unreadable result over a parent background. Always pair the pattern with a solid background-color declaration.
In the tile-plus-background-size approach, the shape size and the tile size are independent. Increasing background-size from 24px to 48px spaces the dots twice as far apart but leaves them the same size, which usually reads as a mistake rather than a design choice. To scale the whole pattern proportionally, multiply the shape dimension and the tile dimension by the same factor.
A background pattern that looks good on screen consumes a surprising amount of ink on paper, and many browsers suppress background graphics when printing anyway, producing an inconsistent result. Strip decorative patterns in a print media query so printed pages come out clean.
@media print {
.patterned { background-image: none; }
}
Quick Reference
| Concept | Detail |
|
Repeating gradient |
Tiles itself, no background-size needed |
|
Gradient + background-size |
One tile, repeated |
|
Hard stop |
Same position twice |
|
Layering |
Comma-separated, first listed on top |
|
Offset a layer |
background-position |
|
Always add |
Solid background-color |
|
Behind text |
Keep contrast very low |
|
|
Strip with a media query |
|
Network cost |
No image file, no HTTP request |
|
Resolution |
Sharp at any pixel density |