CSS Background Pattern Generator

How to use the CSS Background Pattern Generator

Choose a Pattern from the dropdown: diagonal, horizontal or vertical stripes, polka dots, checkerboard, grid lines, zigzag, cross hatch or triangles.

Pick the Background and Pattern colour.

Set Pattern opacity and Pattern size (the tile size in pixels) while watching the live preview.

Copy or download the CSS tab and apply the class to any element.

A CSS background pattern generator with no images

This CSS background pattern generator builds repeating patterns entirely from CSS gradients. There is no image to download, so the pattern is sharp at any zoom level, costs only a couple of lines of CSS and can be recolored by editing two values. Nine patterns are available, each with a background color, a pattern color, an opacity and a size.

Example output

The default polka dots (teal on a pale mint background, 60% opacity, 24px tiles):

.pattern {
  background-color: #f0fdfa;
  background-image: radial-gradient(rgba(15, 118, 110, 0.6) 3.6px, transparent 4.6px);
  background-size: 24px 24px;
}

Each dot is a radial gradient whose radius is 15% of the tile size. The extra pixel between the color stop and the transparent stop softens the edge so dots do not look jagged.

How the patterns are built

Pattern	Technique
Diagonal, horizontal, vertical stripes	`repeating-linear-gradient` at 45°, 0° or 90°, half color and half transparent per repeat. No `background-size` is needed.
Polka dots	One `radial-gradient` per tile.
Checkerboard	A `conic-gradient` that fills two opposite quarters of each tile.
Grid lines	Two 1px `linear-gradient` layers, horizontal and vertical.
Zigzag	Four 45° triangles from angled linear gradients, offset with `background-position`.
Cross hatch	Two 1px repeating gradients at 45° and −45°.
Triangles	A 45° hard-stop gradient splitting each tile diagonally.

Options explained

Background – output as background-color, so it also shows through transparent parts of the pattern.
Pattern colour and opacity – combined into one rgba() value (5–100%). Low opacity gives a subtle texture behind text.
Pattern size – 6 to 120px; the tile size, or the stripe period for stripes.

Tips

Keep text readable. Patterns behind body text should be low contrast. Around 10–20% opacity works for a texture.
Layer it. background-image accepts a comma-separated list, so you can place the pattern over a gradient from the CSS gradient generator.
Fixed to the page. Add background-attachment: fixed to keep the pattern still while content scrolls.
Theme it. Replace the colors with CSS variables to switch patterns between light and dark themes.

For organic shapes rather than geometric repeats, try the SVG blob generator or the SVG wave generator.

Privacy

Patterns are generated in your browser; nothing is uploaded or stored on a server.

Frequently asked questions

Are CSS gradient patterns better than image patterns?

They need no extra request, scale without blurring and can be recolored in CSS. Very complex patterns with many layers can be slower to paint than a small tiled image, but the simple patterns here are cheap.

Why do my diagonal stripes look jagged?

Hard color stops on an angle are not anti-aliased in every browser, so edges can look stepped. Adding a pixel of transition between the stops, for example 12px and 13px instead of 12px 12px, smooths the edge.

Can I use these patterns in Tailwind CSS?

Yes. Use an arbitrary value such as bg-[image:radial-gradient(...)] with bg-[length:24px_24px], or add the rule to your CSS layer as a custom class. Spaces inside arbitrary values must be written as underscores.

Do these patterns work in all browsers?

Linear, radial and repeating gradients work in every current browser. The checkerboard uses conic-gradient(), which is supported in current Chrome, Edge, Firefox and Safari but not in very old versions.