Mesh Gradient

Each palette colour is a soft gaussian point on its own slow orbit. The points are blended by weight into a continuous mesh gradient, and the cursor gently swirls it. The default palette is monochrome graphite. Swap in your brand colours and it becomes a quiet hero backdrop.

Adapted from Paper Shaders · Apache-2.0

mesh gradientOKLabswirl cursor

Live· swirl

Installation

Add it to your project

$

pnpm dlx shadcn@latest add https://funshader.com/r/mesh-gradient.json

Installs 5 files into components/shaders. The engine is shared, so a second shader only adds its own three files.

Usage

Mount it behind your content

app/hero.tsx

import { MeshGradientShader } from "@/components/shaders/mesh-gradient/mesh-gradient-shader";

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <MeshGradientShader className="-z-10" />
      {/* your content */}
    </section>
  );
}

The shader fills its nearest positioned ancestor. Give the parent relative isolate and the shader -z-10 to put it behind everything else. The cursor is tracked on the window, so content on top doesn’t block it.

API reference

Props

Prop	Type	Default	Description
colors	ShaderColor[]	["#101010", "#F5F5F5", "#B0B0B0", "#3A3A3A"]	Palette, low → high. Hex strings or 0–1 RGB triplets, up to 8.
speed	number	0.57	Multiplier on elapsed seconds.
scale	number	1.26	Zoom. Higher values show more of the field.
intensity	number	0.35	Spread.
paramA	number	0.28	Softness.
warp	number	0	Amount of organic domain warp.
detail	number	1.82	Frequency of the warp noise.
contrast	number	1	Colour grade: contrast.
brightness	number	0	Colour grade: brightness offset.
saturation	number	1	Colour grade: saturation.
hue	number	0	Hue rotation in radians.
vignette	number	0	Edge darkening, 0–1.
blur	number	0	Soft 5-tap blur radius.
grain	number	0.04	Film grain amount.
seed	number	1310	Noise seed.
rotation	number	0	Field rotation in radians.
drift	number	0	Slow positional drift.
oklab	boolean	true	Blend palette colours in OKLab.
offset	[number, number]	[0,0]	Pans the field.
cursor	Partial<ShaderCursor>	{"effect":"swirl","strength":0.2,"radius":0.46,"follow":"direct"}	Pointer effect: push, lens, swirl, ripple, glow or none.
paused	boolean	false	Freezes the current frame.
maxDpr	number	2	Cap on devicePixelRatio.
respectReducedMotion	boolean	true	Draws a still frame for prefers-reduced-motion.
className	string	—	Classes for the absolutely-positioned wrapper.

Keep exploring

More shaders

04

Waves

Layered sine bands that bend away from your cursor.

sine bandsfbmlens cursor

02

Metaballs

Five orbiting blobs that melt into one field.

metaballsOKLabswirl cursor