Black Grid Background in CSS: Graph Paper, Dots and Squares

Last reviewed on 2026-10-03

A grid on a black background is one of the most popular "tech" looks on the web: graph paper for landing pages, dot grids behind dashboards, checkerboards behind transparent images. All of them can be built with background-image gradients alone, with no image files. Each pattern below is a live demo followed by the exact CSS that draws it.

Every pattern relies on the same idea: one gradient draws a single line or dot inside a tile, and background-size sets the tile size so it repeats. If the repeat mechanics are new to you, read background-repeat and multiple backgrounds first.

1. Simple black grid

.black-grid {
  background-color: #000;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),        /* horizontal lines */
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); /* vertical lines */
  background-size: 40px 40px;
}

The first gradient runs top to bottom and is only coloured for its first pixel, so each 40px tile gets a 1px line along its top edge. The second gradient is rotated 90deg and draws the left edge. Change 40px 40px to change the cell size, and the alpha value to make the lines brighter or subtler.

2. Graph paper (major and minor lines)

.graph-paper {
  background-color: #000;
  background-image:
    linear-gradient(rgba(0,200,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,.35) 1px, transparent 1px),
    linear-gradient(rgba(0,200,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,.12) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

Four layers: two strong ones on a 100px tile and two faint ones on a 20px tile. Each comma-separated background-size value applies to the layer in the same position.

3. Dot grid

.dot-grid {
  background-color: #000;
  background-image: radial-gradient(circle, rgba(255,255,255,.35) 1.5px, transparent 2px);
  background-size: 24px 24px;
}

The half-pixel gap between the colour stop (1.5px) and the transparent stop (2px) anti-aliases the dot edge. Use background-position: 12px 12px if you need the dots to start offset from the corner.

4. Black checkerboard

.checkerboard {
  background: repeating-conic-gradient(#161616 0 25%, #000 0 50%) 0 0 / 40px 40px;
}

A conic gradient that alternates two colours every quarter turn produces four squares per tile; at 40px the squares are 20px. This is the same pattern image editors use to show transparency.

5. Evenly spaced squares (square, gap, square, gap)

.square-grid {
  background-color: #000;
  background-image: conic-gradient(at 20px 20px, transparent 75%, #1f1f1f 0);
  background-size: 40px 40px;   /* 20px square + 20px gap */
}

A conic gradient centred at 20px 20px sweeps clockwise from the top. The last quarter of the sweep (75%–100%) covers the region to the left of and above the centre, which is exactly the 20×20 square in the tile's top-left corner. The tile size controls the gap: background-size: 30px 30px gives 20px squares with 10px gaps.

Coloured squares only in the top-left corner

A common request is a fully black page with a block of evenly spaced, different-coloured squares in one corner only. Background layers always repeat across the whole element, so the trick is to put the pattern on a pseudo-element that is only as large as the area you want covered:

body {
  background-color: #000;
  position: relative;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;          /* size of the patterned corner */
  height: 140px;
  background-image:
    conic-gradient(at 20px 20px, transparent 75%, #ff4d6d 0),
    conic-gradient(at 20px 20px, transparent 75%, #ffd166 0),
    conic-gradient(at 20px 20px, transparent 75%, #06d6a0 0);
  background-size: 120px 40px;              /* one tile holds 3 square slots */
  background-position: 0 0, 40px 0, 80px 0; /* shift each colour by one slot */
  pointer-events: none;
}

Each layer draws a 20px square at the start of a 120px-wide tile. Offsetting the three layers by 40px puts a red, a yellow and a green square side by side with 20px gaps, and the sequence then repeats. Rows are 40px apart because the tile is 40px tall. Change width and height to control how many squares appear.

6. Grid that fades out at the edges

.fading-grid {
  background-color: #000;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

mask-image hides the element (including its content) where the mask is transparent, so use it on a decorative layer behind your content rather than on the content itself. Older Safari versions need the -webkit-mask-image prefix as well.

7. Isometric / triangle grid

.iso-grid {
  background-color: #000;
  background-image:
    repeating-linear-gradient(30deg,  rgba(255,255,255,.1) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(150deg, rgba(255,255,255,.1) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.1) 0 1px, transparent 1px 28px);
}

Three sets of parallel lines at 30deg, 150deg and 90deg intersect into triangles. repeating-linear-gradient repeats on its own, so no background-size is needed.

Tips for grid backgrounds

Keep lines faint. Alpha values between .06 and .15 keep a grid in the background; text on top still needs its own contrast check.
Lock the grid to the page with background-attachment: fixed if you want content to scroll over a static grid (see the attachment guide for mobile caveats).
Sub-pixel lines can blur or disappear at some zoom levels. Use whole-pixel tile sizes and line widths.
Generate variations without writing the gradients by hand with the CSS pattern generator.