Checkerboard background pattern

A two-color checkerboard drawn with one conic-gradient — no image.

background
pattern
checkerboard
conic-gradient

Color 1#2a2d3a

Color 2#3a3f4f

Tile size40px

HTML

<div class="checker"></div>

CSS

:root {
    --c1: #2a2d3a;
    --c2: #3a3f4f;
    --size: 40px;
}

.checker {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    background-image: conic-gradient(
        var(--c1) 25%,
        var(--c2) 0 50%,
        var(--c1) 0 75%,
        var(--c2) 0
    );
    background-size: var(--size) var(--size);
}

How it works

A conic-gradient with hard stops draws a 2×2 checker inside one tile: two opposite quadrants get --c1, the other two get --c2. Tiling it with background-size repeats the pattern across the element, so each visible square is half of --size.

It’s one declaration, infinitely scalable, and themeable with two variables — much lighter than a checkerboard image. Lower the contrast for a subtle “transparency” backdrop behind images.