Background Pattern Generator

Generate CSS background patterns — dots, grids, hexagons, circuits & more with live preview.

Live Preview

Controls

Pattern Color

Background Color

Element Size: 20px

Spacing / Tile: 40px

Opacity: 100%

Generated CSS

css

.pattern {
  background: radial-gradient(circle, rgba(59, 130, 246, 1) 20%, transparent 20%);
  background-size: 40px 40px;
  background-color: #ffffff; /* fallback/base */
}

Presets

Click any preset to apply