CSS Background Pattern Generator

Generate pure CSS background patterns using gradients with stripes, dots, checkers, and geometric designs.

Tested tool guide Tested browser tools Checked August 16, 2026

What CSS Background Pattern Generator does, with a checked example

This tool composes background patterns from pure CSS gradients: repeating-linear-gradient for stripes, radial-gradient for dots, and layered gradients for checkers and grids. You choose the colors, angle, and repeat size, and the result is a ready-to-paste declaration, not an image file - so the pattern loads with zero extra requests and stays crisp at any zoom. The surprise is usually tiling: dots and checkers repeat according to background-size, and skipping that declaration leaves one oversized dot stretched across the whole element.

Worked example

A concrete input and expected output from the current implementation.

Input

Pattern: stripes. Angle: 45 degrees. Stripe color: #e63946. Ground color: #f1faee. Stripe width: 20px.

Expected output

background-color: #f1faee;
background-image: repeating-linear-gradient(
  45deg,
  #e63946 0,
  #e63946 20px,
  #f1faee 20px,
  #f1faee 40px
);

Stops at 20px and 40px along a 45-degree axis mean each visible stripe is 20px wide, red and cream alternating with a 40px repeat period. Because repeating gradients extend infinitely, the pattern covers any element size with no seams; only the tool's formatting (shorthand properties, comments) would differ in what you copy.

How the result is produced

Repeating gradient math

A repeating-linear-gradient paints color stops along an axis set at the chosen angle and repeats that sequence forever in both directions, so the pattern never ends and never shows a seam. Hard edges need two stops at the same position: one ends the first color, the next starts the second. Since the axis runs perpendicular to the stripes, each stripe's on-screen width equals the stop spacing.

Tiling with background-size

Dots are a radial-gradient drawing one circle; checkers are two linear-gradient layers offset by half a tile. These draw a single tile of the pattern, so the repeat comes from background-size, which fixes the tile dimensions, plus background-position for stacked layers. Miss background-size and the layer stretches across the whole element: a 'dot' pattern renders as one giant dot.

Good uses

Background for a landing-page hero, section divider, or empty state that must load instantly and stay sharp on retina displays - a few lines of CSS replace an image request.
Subtle texture behind code blocks, callout boxes, table headers, or invoice-style documents where faint stripes or dots separate content without an asset file.
Checkerboard backdrop for inspecting a transparent PNG or SVG (logo, icon, cutout): generate the alpha-check pattern in CSS instead of embedding a raster.

Limits and checks

Angle changes density as well as direction. The same stops at 0 degrees repeat every 40px horizontally, but at 45 degrees they repeat every 40 x sqrt(2), about 56.6px, so an angled pattern looks sparser than a straight one. Stripe thickness stays equal to the stop spacing, so change the stops to change thickness.
Gradients paint as background images, and their transparent areas show what is behind them: the element's background-color, or the page behind the element if none is set. A dots or checkers pattern with a transparent ground depends on the declared background-color, so set it deliberately.
Dot size and dot spacing are independent. background-size controls how far apart the dots sit, while the gradient's radius controls the dot itself. Scaling one without the other either crowds the dots or leaves them small on a wide grid - change both together, and keep a checkerboard's offset at half the new tile size.

Common questions

Will these patterns work in HTML email?

Not reliably. Outlook renders messages with a Word-based engine that does not support CSS gradients, and other clients support them inconsistently. If the pattern matters in email, use a small repeating PNG as the background-image and keep the gradient version for the web page, or test the message in each client you target.

How do I make the pattern bigger or smaller?

For stripes, multiply every stop position: double the width means 20px and 40px become 40px and 80px. For dots, change background-size to move the dots apart and the gradient's radius to resize the dots themselves; for checkers, change background-size and keep background-position at half the tile. The angle never needs to change.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.