Skip to content
Musterli

Grid

Tiles CSS pattern

Square tiles in two colors with narrow grout lines.

Customize in the editor

Change colors, size and opacity, then export as CSS, SVG or PNG.

Code

Paste the lines into your element's rule. The pattern repeats by itself and adapts to any size.

CSS

background-color: #ecfdf5;
background-image: conic-gradient(from 270deg at 37px 37px, #047857 0deg 90deg, transparent 90deg 360deg), conic-gradient(from 270deg at 37px 37px, #047857 0deg 90deg, transparent 90deg 360deg), conic-gradient(from 270deg at 37px 37px, #f59e0b 0deg 90deg, transparent 90deg 360deg), conic-gradient(from 270deg at 37px 37px, #f59e0b 0deg 90deg, transparent 90deg 360deg);
background-size: 80px 80px, 80px 80px, 80px 80px, 80px 80px;
background-position: 1.5px 1.5px, 41.5px 41.5px, 41.5px 1.5px, 1.5px 41.5px;

Tailwind

bg-[#ecfdf5] [background-image:conic-gradient(from_270deg_at_37px_37px,_#047857_0deg_90deg,_transparent_90deg_360deg),_conic-gradient(from_270deg_at_37px_37px,_#047857_0deg_90deg,_transparent_90deg_360deg),_conic-gradient(from_270deg_at_37px_37px,_#f59e0b_0deg_90deg,_transparent_90deg_360deg),_conic-gradient(from_270deg_at_37px_37px,_#f59e0b_0deg_90deg,_transparent_90deg_360deg)] [background-size:80px_80px,_80px_80px,_80px_80px,_80px_80px] [background-position:1.5px_1.5px,_41.5px_41.5px,_41.5px_1.5px,_1.5px_41.5px]

How to use this pattern

Copy the CSS into the rule of the element that should carry the pattern, for example a section, a card or the body. The colors are hex values in the code and can be swapped directly. In the editor you change everything with sliders and can also export the pattern as SVG or PNG.

Related patterns

All CSS patterns

  • Grid Lines

    Thin lines on a square grid, rotatable to any angle.

    Grid

  • Graph Paper

    A fine minor grid with a bold major line every five cells.

    Grid

  • Dotted Grid

    Grid lines with a dot on every crossing.

    Grid

  • Crosshatch

    Diagonal lines in both directions, like a lattice or hatching.

    Grid

  • Bricks

    A running bond brick wall drawn as mortar lines.

    Grid

  • Stripes

    Wide stripes at any angle you like.

    Stripes