Skip to content
FR

CSS pattern generator

Create background patterns in pure CSS: dots, grid, lines, diagonal stripes, checkerboard, zigzag, cross, diamonds. Adjustable colors and sizes, no image.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Dress up your backgrounds with geometric patterns in pure CSS: polka dots, graph-paper grid, notebook lines, diagonal stripes, checkerboard, zigzag, cross and diamonds. Set the two colors, the size and the thickness, then copy the code: no image to host.

When to use it

Section backgrounds

A very light grid or subtle dots give a background character without hurting readability.

Drop zones and empty states

Diagonal stripes signal a drag-and-drop area or an empty slot.

Mockups and presentations

A light pattern avoids overly empty white backgrounds in a mockup.

How to use

  1. Pick a pattern.
  2. Set the colors, size and thickness.
  3. Copy the background CSS code.

How it works

Each pattern is made of one or more gradients whose colors switch instantly (no transition), drawing crisp shapes. background-size sets the size of the repeating tile.

The preview applies exactly the generated code; the selection thumbnails are rendered with your colors.

Tips for best results

  • Keep a low contrast between the two colors for a background behind text.
  • A size of 16 to 32 px suits most backgrounds.
  • Avoid tight, high-contrast patterns: they can create a moiré effect.
  • Combine a pattern with a transparent gradient to fade it out.

Common problems and fixes

The pattern shimmers when scrolling

Fine high-contrast patterns create moiré: increase the size or lower the contrast.

Lines are blurry

With fractional thickness or zoom, edges soften. Use whole-pixel thicknesses.

The pattern doesn't cover the whole block

Make sure the element has a height: an empty block with 0 height shows nothing.

Frequently asked questions

Why CSS patterns rather than images?

They need no file to load, stay sharp on every screen, and change by editing two colors in the code.

How are they made?

With CSS gradients (linear-gradient, radial-gradient, conic-gradient) with hard color stops, repeated with background-size.

Can I combine them with a background color?

Yes, the background color is part of the code. The pattern can also sit on top of an image by adding a layer to background-image.

Do they work everywhere?

Yes, in every recent browser; the checkerboard uses conic-gradient, supported everywhere since 2020.

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.