Mesh Gradient Shader

Use Mesh Gradient Shader for a decorative background built from moving color spots, distortion, and vortex effects. It can provide subtle ambient motion or remain static behind content.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Motion

npx shadcn@latest add @sona-ui/mesh-gradient-shader

Basic usage

mesh-background.tsx

import MeshGradientShader from "@/components/ui/mesh-gradient-shader/mesh-gradient-shader";
 
export function MeshBackground() {
return <MeshGradientShader className="absolute inset-0" speed={0.2} />;
}

Examples

Adjust colors, distortion, swirl, and grain to fit the surface. Set speed to zero when the background should remain still.

Usage


export default function MeshGradientShaderExample() {
  return <MeshGradientShader className="h-64 w-full lg:h-72" />;
}

API

Property	Type	Default	Description
`colors`	`string[]`	`["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"]`	Up to 10 color spots. Accepts hex, RGB, or HSL strings.
`distortion`	`number`	`0.3`	Power of organic noise distortion (0–1).
`swirl`	`number`	`0.2`	Power of vortex distortion (0–1).
`grainMixer`	`number`	`0`	Grain distortion on color edges (0–1).
`grainOverlay`	`number`	`0`	Post-processing grain overlay (0–1).
`speed`	`number`	`1`	Animation speed multiplier. 0 = static.

Accessibility

Treat the shader as decorative. Check text contrast against the final color field and provide a reduced-motion alternative for meaningful content.

Styling

Use className to constrain the shader to its background layer. The color controls accept standard CSS color values.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.