Graph paper grid background

A ruled grid (graph paper) background from two crossing linear-gradients.

background
pattern
grid
graph-paper
linear-gradient

Line color#2a2d3a

Background#12151c

Cell size24px

HTML

<div class="graph"></div>

CSS

:root {
    --line: #2a2d3a;
    --bg: #12151c;
    --gap: 24px;
}

.graph {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: var(--gap) var(--gap);
}

How it works

Two linear-gradients each draw a single 1px line — one horizontal, one vertical — and background-size tiles them into a grid:

linear-gradient(var(--line) 1px, transparent 1px) is a horizontal rule.
The 90deg version is the vertical rule.
They stack over a --bg background-color.

Add a second, larger pair of gradients with thicker lines for a “major/minor” graph-paper or blueprint look.