CSS Background Pattern Generator

Generate CSS background patterns — dots, grids, stripes, and more — with live preview.

Pattern: DOTSPattern Size: 20pxOpacity: 100%CSS Length: 134 chars

Pattern

Pattern Color

Background Color

Pattern Size20px

Opacity100%

Pattern Presets

Dots

Stripes

Checker

Grid

Diagonal

Zigzag

Live Preview

CSS Output

background-color: #ffffff;
background-image: radial-gradient(rgba(226,232,240,1.00) 1px, transparent 1px);
background-size: 20px 20px;

CSS background patterns explained

All six patterns are built entirely with CSS gradients — no images, no SVG files, no JavaScript. Dots use radial-gradient to draw a circle at each tile's centre. Grids and stripes use one or two linear-gradient layers for lines. Checkerboards layer four angled gradients offset by half a tile. The background-size property controls tile density, and changing the color's alpha lets the background color show through for a softer effect. Because they are CSS images, patterns scale crisply at any device pixel ratio and add zero network requests.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a pure-CSS pattern without an image request.
Getting a subtle grid or dot texture for a section background.
Building a pattern whose colours come from custom properties.
Comparing pattern densities with a live preview.
Producing a pattern with no SVG at all, where gradients alone carry the shape.

Frequently Asked Questions

How do multiple backgrounds stack?: First listed is on top, last is at the bottom — the opposite of what people expect from source order elsewhere. background-color is always painted last, behind every image, which is why it can only ever be a fallback and never an overlay.
What is the difference between cover and contain?: cover scales the image until it fills the box, cropping whatever overflows. contain scales until the whole image fits, leaving empty space. Cover for a hero where filling matters more than the edges; contain for a logo that must not be cut.
What does background-attachment: fixed do?: Pins the image to the viewport so it appears to stay still while content scrolls over it. It is the classic parallax effect and it is expensive — the browser repaints the area on every scroll frame — and it is ignored entirely on iOS Safari, which is why the effect often just disappears on a phone.
How do background-origin and background-clip differ?: origin sets where positioning starts from — padding box by default — and clip sets where painting stops, at the border box by default. background-clip: text is the outlier: it clips the background to the glyph shapes, which is how gradient text is made.
Does a background image need alt text?: It cannot have any, which is the reason to think about it. A CSS background is invisible to assistive technology, so anything carrying meaning belongs in an <img> with a real alt attribute. Backgrounds are for decoration; that is not a stylistic preference but an accessibility boundary.

Common errors and gotchas

Choosing a pattern busy enough to hurt the legibility of text over it.
Producing a very complex gradient stack, which is expensive to paint on scroll.
Assuming the pattern tiles seamlessly at any size, which depends on the repeat unit.
Forgetting a background colour fallback for contexts that do not render the pattern.
Using a pattern where a single flat colour would have read better.