CSS Background Pattern Generator

How it works

Type two colours into the left box: the first line is the colour of the stripes or dots, the second line is the background. Write only one line and white is assumed for the background. HEX, RGB and HSL are all read. Then choose the pattern and set the step size: the step says how often the motif repeats — at 16 pixels a striped pattern gives a 16 pixel band of colour next to a 16 pixel gap, so the motif starts over every 32 pixels. Paste the resulting CSS into your stylesheet as it stands; the class name is yours to change. The two swatches under the output carry the same HEX labels used in the CSS, so you will not mix up which colour is the pattern and which is the background. What you get is not an image file but a gradient the browser draws: it stays sharp at any zoom or pixel density and costs the page no extra request.

This tool is also known as css background pattern, css striped background, css checkerboard background, css pattern generator without image, repeating linear gradient stripes.

What is repeating-linear-gradient?

repeating-linear-gradient is the CSS function that takes the colour transition you define between two points and repeats it indefinitely. A plain linear-gradient stretches its last colour across whatever space remains, while the repeating version starts over after the final stop — which is why striped and diagonal patterns fit on a single line. When you want a hard edge rather than a blend, you place the end of one colour and the start of the next at the same pixel; the gradient then reads as a crisp band boundary.

What is background-size?

background-size sets the box a background layer is painted into, and it is the property that does the actual tiling in pattern work. A radial-gradient on its own only draws one dot; fit that drawing into a 16 by 16 pixel box and let it repeat across the surface, and a regular dot pattern appears. When several background layers are stacked, the values are written comma-separated in layer order, and if the list is shorter than the number of layers it is read again from the beginning.

What is conic-gradient?

conic-gradient arranges its colour stops by sweeping around a centre point; it does on an angle what linear-gradient does along a line and radial-gradient does outwards from the middle. Pie-chart looks, colour wheels and chessboard patterns can all be written with it in a single line. This tool builds its checked pattern from two linear-gradient layers instead, because the shorter conic version only works in newer browsers and the output is meant to be safe to paste anywhere.

What is the difference between a gradient pattern and a tileable PNG?

A tileable PNG is a small pre-drawn image stamped repeatedly across a surface: it costs the browser an extra download, it softens on high-density screens, and recolouring it means regenerating the file. A gradient pattern lives inside the stylesheet as a rule and is drawn by the browser on the spot; it is sharp at every resolution, its colour and step change with a one-line edit, and it adds no request. PNG keeps the upper hand in exactly one area — irregular, organic texture. Paper fibre or film grain cannot be written sensibly as a gradient.

Why draw the pattern with a gradient instead of a PNG?

A tileable PNG is one more file the page has to fetch, it softens on high-density displays, and changing its colour means producing the image again. None of that applies to a gradient: a colour change is a one-line edit and the drawing stays crisp at every resolution.

The one thing to watch is the moiré that appears at very small steps. Below roughly 4 to 6 pixels the browser's edge smoothing can produce a fine shimmer that looks like rippling while the page scrolls. For dense patterns, staying at 8 pixels or above is the safe choice.

Which pattern is useful where?

A background pattern must not make the content harder to read, which is why the contrast between pattern and background is usually kept deliberately small.

• Stripes → section dividers, empty-state panels
• Diagonal stripes → the classic marker for disabled, draft or reserved areas
• Checks → the transparency indicator familiar from image editors
• Dots → a lightly textured page background or card backing
• Grid → drawing canvases, layout plans and wireframe backgrounds

Frequently asked questions

Where do I paste the generated CSS?

Add it to your stylesheet as it is and give the pattern class to whichever element needs it. Renaming the class is fine; as long as the declarations inside stay intact the pattern is unaffected.

What exactly does the pattern step change?

The repeat interval of the motif. In striped and diagonal patterns the step is the thickness of one band, in dotted and grid patterns it is the distance between two motif centres, and in the checked pattern it is the side of one square.

Do these patterns work in older browsers?

Yes. The output uses the classic four-stop colour notation rather than the newer multi-position shorthand, and repeating-linear-gradient, radial-gradient and background-size have been supported across current browsers for years.

Can I download the pattern as an image?

This tool produces CSS, not an image; the file you download has a .css extension. If the target cannot handle CSS gradients — an HTML email template, for example — you will need a tileable PNG instead.