Mesh Gradient Shader

A flowing composition of animated color spots, shaped by organic distortion and vortex effects. Powered by Paper Design Shaders.

Features

• Up to 10 customizable color spots in any CSS color format.
• Independent distortion and swirl controls for organic or structured looks.
• Optional grain effects for added texture.
• Animatable with speed control — set to 0 for a static gradient.

Examples

Ocean

Sunset

Monochrome

Static

Set speed={0} to freeze the gradient — useful as a decorative background.

Playground

Adjust distortion, swirl, speed, and grain to explore the full range of the shader.

Installation

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

Usage

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

Props