Pattern Generator

Generate pure CSS background patterns — dots, grid, diagonal, checkerboard, and more.

Pattern Settings

Pattern Type

Size / Line Width4px

Spacing / Repeat24px

Foreground Color

Background Color

Preview

Generated CSS

.patterned-bg {
  background: radial-gradient(circle, #94a3b8 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: #f8fafc;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Pattern Generator?

Generate CSS background patterns: dots, lines, grid, checkerboard, and diagonal stripes. Built entirely from CSS gradients - no image files.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Pattern Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Select a pattern type

Choose dots, lines, grid, checkerboard, diagonal stripes, or hexagons. A live preview shows the pattern tiling.

Adjust size, spacing, and colour

Set the pattern element size, the background-size (controls tile repeat), and the foreground and background colours.

Copy the CSS

Click Copy to get the background-color, background-image, and background-size values together.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Dot grid pattern */
.dot-grid {
  background-color: #f8fafc;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Diagonal stripes */
.stripes {
  background: repeating-linear-gradient(
    -45deg,
    #f8fafc,
    #f8fafc 5px,
    #e2e8f0 5px,
    #e2e8f0 10px
  );
}

/* Graph paper */
.graph {
  background-color: white;
  background-image:
    linear-gradient(rgba(108,46,245,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,46,245,0.1) 1px, transparent 1px);
  background-size: 24px 24px;
}

CSS patterns are infinitely scalable, require no image files, and can be animated with background-position.

Pro tips

Pro tips for better results

★

background-size controls the tile repeat frequency

A smaller background-size repeats the pattern more densely. A larger one spaces it out. This value is independent of the dot or line size within the gradient.

★

Patterns can be animated by changing background-position

animation: slide 2s linear infinite; @keyframes slide { to { background-position: 24px 24px; } } creates a moving pattern.

★

Keep pattern contrast low for backgrounds

Patterns behind content should be subtle (5-15% opacity difference from background). High-contrast patterns compete with the content sitting on top.

FAQ

Frequently asked questions

CSS patterns are infinitely scalable, have no file size, render crisply on retina displays, and can be animated. Image textures offer more complexity (photography, hand-drawn textures) that CSS cannot replicate. Use CSS for geometric patterns, images for organic textures.

No. Everything runs in your browser. Nothing is sent to a server.