Crosshatch CSS gradient

Tight ink hatching on bone. 3 CSS layers on #F2F0E9, mixed with multiply. Edit it in the studio below, then copy the code.

Gradient Studio couldn't load its presets.

It needs a live connection to CrunchCube. Check your internet connection and reload, or open the studio at crunchcube.in.

CSS gradients · blend modes · Tailwind · 40 presets

Crosshatch,
ready to paste.

Tight ink hatching on bone. 3 layers mixed with multiply. Open it in the editor to tune each layer, then take the code as CSS, Tailwind, SVG or HTML.

Crosshatch CSS

.bg-crosshatch {
  background-color: #F2F0E9;
  background-image:
    repeating-linear-gradient(45deg, rgba(20, 20, 26, 0.13) 0px, rgba(20, 20, 26, 0.13) 1px, rgba(20, 20, 26, 0) 1px, rgba(20, 20, 26, 0) 9px),
    repeating-linear-gradient(-45deg, rgba(20, 20, 26, 0.1) 0px, rgba(20, 20, 26, 0.1) 1px, rgba(20, 20, 26, 0) 1px, rgba(20, 20, 26, 0) 9px),
    radial-gradient(circle at 70% 75%, rgba(199, 191, 174, 0.7) 0%, rgba(199, 191, 174, 0) 60%);
  background-blend-mode: multiply, multiply, multiply;
  background-size: cover;
}

Colours in Crosshatch

#F2F0E9#14141A#C7BFAE

Where to use it

Crosshatch is a lattice gradient on a light base. Use it for hero sections, pricing cards and soft placeholders on light pages. Dark text reads well on top, but check contrast where the strongest colours sit.

New to layered gradients? Here's how the CSS works.

More lattice gradients

Aurora BeamsDiagonal beams over a teal glow
Grid GhostA faint grid under a soft light
Diagonal RaysWide light rays, warm source
ScanlineCRT lines over cold blue
Warp WeaveTwo ray sets crossing at an angle

New games, tools and tutorials

About one short email a week. No spam, one-click unsubscribe.