Grid Ghost CSS gradient

A faint grid under a soft light. 4 CSS layers on #0E0E14, mixed with overlay and screen. 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

Grid Ghost,
ready to paste.

A faint grid under a soft light. 4 layers mixed with overlay and screen. Open it in the editor to tune each layer, then take the code as CSS, Tailwind, SVG or HTML.

Grid Ghost CSS

.bg-grid-ghost {
  background-color: #0E0E14;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 34px),
    radial-gradient(circle at 40% 30%, rgba(99, 102, 241, 0.7) 0%, rgba(99, 102, 241, 0) 55%),
    radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.45) 0%, rgba(236, 72, 153, 0) 45%);
  background-blend-mode: overlay, overlay, screen, screen;
  background-size: cover;
}

Colours in Grid Ghost

#0E0E14#FFFFFF#6366F1#EC4899

Where to use it

Grid Ghost is a lattice gradient on a dark base. Use it for dark-mode heroes, app splash screens and video thumbnails, with white or very light text on top.

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

More lattice gradients

Aurora BeamsDiagonal beams over a teal glow
Diagonal RaysWide light rays, warm source
ScanlineCRT lines over cold blue
Warp WeaveTwo ray sets crossing at an angle
CrosshatchTight ink hatching on bone

New games, tools and tutorials

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