BYTETOOLS

CSS Background Pattern Generator

Make stripes, checkerboards, polka dots, grid paper, hatching, zigzags and carbon fibre from pure CSS gradients — no image files and no extra HTTP requests.

Pattern settings

Background
Pattern
24
50
45

CSS

.patterned {
  background-color: #f8fafc;
  background-image:
    repeating-linear-gradient(45deg, #7c3aed 0, #7c3aed 12px, #f8fafc 12px, #f8fafc 24px);
  background-repeat: repeat;
}

What is the CSS Background Pattern Generator?

A repeating background does not need an image. CSS gradients tile, so a handful of repeating-linear-gradient and radial-gradient layers can produce stripes, dots, graph paper and more — with no extra file to download, no blurring when the user zooms, and colours you can change with a single variable.

  • Eight patterns built purely from CSS gradients
  • Tile size, thickness and angle controls
  • Thumbnail switcher that keeps your colour choices
  • Output uses background longhands so nothing gets reset
  • Scales perfectly at any zoom or screen density
  • No image files and no network requests

How to use the CSS Background Pattern Generator

  1. 1

    Choose a pattern from the dropdown or the thumbnail row.

  2. 2

    Set the background and pattern colours with the swatches or hex fields.

  3. 3

    Adjust tile size, and thickness or angle where the pattern uses them.

  4. 4

    Check the large preview panel at the top of the page.

  5. 5

    Copy the CSS and paste it onto any element.

About the CSS Background Pattern Generator

A repeating background does not need an image. CSS gradients tile, so a handful of repeating-linear-gradient and radial-gradient layers can produce stripes, dots, graph paper and more — with no extra file to download, no blurring when the user zooms, and colours you can change with a single variable.

This generator covers eight patterns: stripes, checkerboard, polka dots, grid paper, diagonal hatch, zigzag, carbon fibre and triangles. Tile size, line thickness and angle are sliders, and the two colours are swatches with typed hex fields beside them. A thumbnail row lets you flick between patterns while keeping your colours.

The output uses background longhands rather than the background shorthand, which means you can paste it into an existing rule without wiping out a colour you set elsewhere. Everything runs in your browser and nothing is uploaded.

Frequently asked questions

Can you make patterns with CSS instead of images?

Yes. Gradients repeat when you give them a background-size smaller than the element, so stripes, checks, dots and grids are all achievable with one or two gradient layers. The result is a few hundred bytes of CSS instead of an image file, and it stays sharp at every zoom level.

Why does my CSS pattern disappear when I paste it?

Usually because a background shorthand elsewhere in the rule is resetting it. The shorthand clears every background longhand it does not mention, including background-color and background-image. This tool only emits longhands to avoid exactly that.

Are CSS gradient patterns bad for performance?

For normal use they are fine and usually faster than an image, since there is no extra request. The one case to watch is a very small tile size stretched over a very large area on a low-end device, where repainting can get expensive. If you see jank, increase the tile size.

How do I change the size of a CSS background pattern?

Change background-size, which controls the tile. The tile size slider here does that and rescales the gradient stops to match, so the proportions stay the same as the pattern grows or shrinks rather than the lines getting thicker.

Can I use a CSS pattern behind text?

You can, but keep the contrast between the two pattern colours low so the text still reads. A busy high-contrast pattern under body copy is hard work for anyone, and particularly bad for people with dyslexia or low vision. Subtle grid paper or a faint hatch is usually the right call.

Related tools