Backgrounds LIVE / shader-gradient

Live demo — the real Mesh Gradient Library engine, running in your browser.

← Catalog
Backgrounds

Mesh Gradient Library

Sixty hand-tuned WebGL gradient presets with a copy-paste embed snippet.

$49 Checkout coming soon

One-time payment · instant download · VAT handled at checkout.

What you get

  • Sixty preset definitions (JSON)
  • A live preview gallery (Astro)
  • Vanilla + Svelte 5 embed snippets
  • A short guide to scrimming gradients for legible text
Highlights

Why it's worth it.

  • Sixty curated shader-gradient presets, from quiet to vivid
  • Live preview gallery so you pick by eye, not by name
  • One-line vanilla embed and a Svelte island wrapper
  • Grain, vignette, and mouse-influence knobs exposed
  • Pauses on prefers-reduced-motion and off-screen

Mesh gives you sixty WebGL gradient backgrounds that already look finished. No fiddling with color stops until 2am — pick one from the live gallery and embed it.

Picked by eye

The included preview gallery renders every preset live, so you choose the way you actually decide: by looking. The hero above is the obsidian preset, brand-quiet on purpose.

One canvas, done right

Each gradient is a single WebGL canvas with grain, vignette, and mouse-influence knobs exposed. The snippets pause the gradient when it scrolls off-screen and under reduced-motion, so it stays a background — not a battery drain. A short guide shows how to scrim a gradient so your headline always reads.

Ready for Mesh Gradient Library?

$49 · one-time

Checkout coming soon