Skip to content
WebTricks

Dotted grid background

A repeating dot-grid background drawn with a single radial-gradient — no image.

  • background
  • pattern
  • grid
  • dots
  • radial-gradient
Dot color#3a3f4f
Gap22px
Dot size2px
HTML 
<div class="dotgrid"></div>
CSS 
:root {
    --dot: #3a3f4f;
    --gap: 22px;
    --size: 2px;
}

.dotgrid {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    background-color: #12151c;
    background-image: radial-gradient(
        var(--dot) var(--size),
        transparent var(--size)
    );
    background-size: var(--gap) var(--gap);
}

How it works

A single radial-gradient draws one dot, and background-size tiles it across the element:

  • The gradient is a solid --dot color out to --size, then transparent — so each tile is one dot on a transparent field.
  • background-size: var(--gap) var(--gap) sets the spacing between dots.
  • A background-color sits underneath as the canvas.

It’s resolution-independent, themeable with variables, and weighs nothing compared to a tiled PNG. Swap radial-gradient for linear-gradient to get ruled lines or a graph-paper grid instead.