CSS Pattern Generator

Build seamless background patterns from pure CSS — dots, grids, stripes, checks, crosshatch, triangles and zigzag. Tune tile size, weight, angle, opacity and colors, then export CSS, Tailwind or SVG. Razor-sharp at any zoom, zero image weight.

Preview

Pure-CSS grid — sharp at any zoom, zero image weight.

Pattern

Tile size24px

Weight1px

Opacity40%

Ink

#bae6fd

Background

#0c4a6e

Gradient backgroundBlend two colors behind the pattern instead of a flat fill.

Export

Drop the class on any element — it tiles seamlessly.

.pattern {
  background-color: #0c4a6e;
  background-image:
    linear-gradient(rgba(186, 230, 253, 0.40) 1px, transparent 1px),
    linear-gradient(90deg, rgba(186, 230, 253, 0.40) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
}