Why gradients instead of an image?

Because a gradient costs no request, never blurs when the page zooms, and can be recoloured by changing one value. A tiling PNG is a file to host, a request to make and a fixed resolution.

Why does the checkerboard need two layers?

Because one layer of 45 degree gradient produces diagonal bands, not checks. The second layer is offset by half a tile, and it is that offset which turns the bands into a checkerboard. It is the detail most hand written versions get wrong.

Do these work on any background?

Yes, though the pattern colour is drawn over the background colour you set here rather than over whatever is behind the element. If you want the page to show through, use a colour with an alpha channel.

CSS Pattern Generator

Backgrounds made of gradients, not images.

Pattern

Pattern colour

Background

Tile size

Backgrounds made of gradients, not images.

How to use it

Pick a pattern. Five to choose from, each built entirely from gradients.
Set the colours and size. Tile size is the repeat distance in pixels.
Copy the CSS. Paste it as a background. There is no image to host.

When you would use this

A repeating background made of CSS gradients has real advantages over a tiling image: no request, no file to host, no blurring when someone zooms, and recolouring is a one value change rather than a trip back to a design tool. The catch is that the CSS is fiddly and the mistakes are quiet. A checkerboard built from a single 45 degree gradient gives diagonal bands rather than checks, and it takes a second layer offset by exactly half a tile to fix it. Diagonal stripes have to repeat along the diagonal or the tile edges show as a visible seam. Dots need their radius tied to the tile size or they turn into circles that touch. Each pattern here is previewed with the same geometry the CSS produces, so the seam or the wrong offset would be visible rather than something you discover after pasting. Tile size is the repeat distance in pixels, and everything inside scales with it, so one number changes the whole density.

Questions

Why gradients instead of an image?: Because a gradient costs no request, never blurs when the page zooms, and can be recoloured by changing one value. A tiling PNG is a file to host, a request to make and a fixed resolution.
Why does the checkerboard need two layers?: Because one layer of 45 degree gradient produces diagonal bands, not checks. The second layer is offset by half a tile, and it is that offset which turns the bands into a checkerboard. It is the detail most hand written versions get wrong.
Do these work on any background?: Yes, though the pattern colour is drawn over the background colour you set here rather than over whatever is behind the element. If you want the page to show through, use a colour with an alpha channel.