CSS Background Pattern Generator

What the background pattern generator does

Repeating patterns — stripes, dots, checkerboards, zigzags — are built from CSS gradients alone: no image file, no request, infinitely scalable, and recolourable with one variable. This generator lets you pick a pattern, set the two colours, the size and (for stripes) the angle, and copy the background rule. Use it for section backgrounds, hero textures, placeholder areas, table zebra striping and print-style effects. Runs in your browser.

How gradient patterns work

A gradient with two colour stops at the same position produces a hard edge instead of a blend. Set background-size smaller than the element and the gradient tiles, so the hard edges repeat as a pattern. Layer several gradients, offset with background-position, and you get dots, grids and checkerboards.

/* Diagonal stripes */
background: repeating-linear-gradient(45deg, #E85D26 0 10px, #fff 10px 20px);

/* Polka dots */
background: radial-gradient(circle, #E85D26 3px, transparent 3.5px);
background-size: 24px 24px;

/* Checkerboard */
background:
  linear-gradient(45deg, #ddd 25%, transparent 25% 75%, #ddd 75%),
  linear-gradient(45deg, #ddd 25%, transparent 25% 75%, #ddd 75%);
background-position: 0 0, 12px 12px;
background-size: 24px 24px;

/* Zigzag */
background:
  linear-gradient(135deg, #E85D26 25%, transparent 25%) -10px 0,
  linear-gradient(225deg, #E85D26 25%, transparent 25%) -10px 0,
  linear-gradient(315deg, #E85D26 25%, transparent 25%),
  linear-gradient(45deg,  #E85D26 25%, transparent 25%);
background-size: 20px 20px;
background-color: #fff;

Pattern options

Pattern	Parameters	Typical use
Stripes	Angle, stripe width, two colours	Warning bands, progress bars, section textures, table rows
Dots	Dot size, spacing, colours	Subtle backgrounds, dot-grid paper, empty states
Checkerboard	Cell size, colours	Transparency indicators, retro or picnic themes
Zigzag	Size, colours	Chevron banners, decorative dividers

Making patterns subtle

Low contrast is the rule for backgrounds behind text: a pattern colour 3–8% different from the base (for example #f7f6f3 dots on #ffffff) adds texture without hurting readability.
Small scale (8–24 px tiles) reads as texture; large scale (60 px+) reads as graphic. Match the intent.
Use the pattern with transparency and a separate background-color so you can change the base colour independently — and so it adapts to dark mode with one variable.
Fade a pattern out with a mask: mask-image: linear-gradient(black, transparent).

Where CSS patterns beat images

Zero bytes over the wire and no extra request.
Sharp at any device pixel ratio — no 2× assets.
Themeable: swap colours with custom properties for dark mode or branding.
Animatable: shift background-position for a moving stripe or a marching-ants effect.
Editable in place without opening a design tool.

Images still win for organic textures (paper, noise, fabric) and for complex illustrations; for those, a small tiling PNG or an SVG pattern is the right tool.

Performance and rendering notes

Gradient patterns are rasterized by the GPU and are cheap for static backgrounds. Many layered gradients on a large scrolling area can cost repaint time; keep it to three or four layers.
Sub-pixel tile sizes cause visible seams on some displays. Use whole-pixel sizes, and even numbers for checkerboards.
Diagonal stripes can show faint moiré at certain zoom levels; a 45° angle with equal stripe widths is the most stable.
All current browsers support multiple backgrounds and repeating gradients; no prefixes needed.

Frequently asked questions

Why are there thin lines between my tiles?

Anti-aliasing at tile boundaries when the size is fractional or the pattern's hard stop lands on a half pixel. Use integer sizes and nudge stop positions by 0.5 px if needed.

How do I animate the pattern?

Animate background-position by one tile length in a loop: @keyframes slide { to { background-position: 24px 0; } }. It will appear to move continuously.

Can I use three or more colours?

Yes — add more stops to the gradient, or layer additional gradients. The generator's two-colour output is a starting point.

How do I make a grid (graph paper)?

Two linear gradients — one horizontal, one vertical — each a 1 px line then transparent, with background-size set to the cell size.

Does it work in email?

Partially. Some clients (Apple Mail) render gradients; Outlook does not. Use a background image for email.

How do I export the pattern as an image?

Apply it to an element of the size you need and screenshot it, or draw it on a canvas. CSS patterns are meant to stay as CSS.