CSS Pattern Generator

About CSS pattern generator

Generate five classic background patterns using nothing but CSS gradients: dots, grid, diagonal lines, checkerboard and cross. Pick a color pair, a tile size and a line thickness, and the tool outputs the background properties. Each pattern needs no image file, so the page stays light.

How to use it

1. Select Dots, Grid, Diagonal, Checkerboard or Cross under Pattern.
2. Choose the Pattern color and the Background color.
3. Set Size (tile size) from 8 to 80 pixels.
4. Set Thickness from 1 to 10 pixels. The slider is hidden for the checkerboard because it has no line width.
5. Press the copy button on the Generated CSS block.

Checkerboard at 20 px

Checkerboard, blue #3b82f6 on white, size 20

background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

When to use it

• Adding a subtle dot grid behind a canvas or whiteboard-style app.
• Creating a graph-paper backdrop for a documentation or diagramming page.
• Showing a transparency checkerboard behind image thumbnails.
• Giving a section a light diagonal hatch without exporting a texture.

Questions about CSS pattern generator

What does Thickness control for dots?

For dots it is the radius of each dot in pixels. The dot is drawn with a radial-gradient that has a hard edge at that radius, repeated every Size pixels.

How is the checkerboard built?

It layers four gradients, each painting a quarter triangle, and shifts them by half the tile size with background-position. That is why the output has a long list of offsets.

What separates Grid from Cross?

Both draw a horizontal and a vertical line per tile. Cross also sets background-position to center, so the lines pass through the middle of the element instead of hugging its top and left edges.

Which properties do I get?

A background-color, a background-image made of gradients and a background-size, with a background-position for checkerboard and cross. Copy the whole block rather than one line.

Related tools

• CSS stripe generatorBuild repeating-linear-gradient stripe backgrounds with custom colors, width, gap, and angle
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• SVG wave generatorCreate layered SVG wave dividers — export as inline SVG markup or CSS background-image data URI
• CSS grid generatorDefine grid columns, rows, and gap visually — generates display:grid CSS ready to copy
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included