React Gradient Mesh Shaders

React gradient mesh with GPU animated gradients. Dynamic gradient backgrounds for Next.js with TypeScript and shadcn/ui—free code.

React

react-shaders

GPU Shaders

Building gradient mesh effects?

Join our Discord community for help from other developers working with GPU gradients and mesh animations.

Need dynamic gradient backgrounds without static CSS limitations? Most developers use simple linear gradients that look flat or complex SVG meshes that lack animation. This React gradient mesh component uses GPU algorithms to create flowing multi-point gradients with organic color transitions.

Copy-paste TypeScript component that creates sophisticated gradient meshes with multiple control points and smooth color blending. Dynamic color cycling through spectrum with organic movement patterns. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth gradient animations.

React gradient mesh with GPU color blending

Dynamic multi-point gradients with organic movement and smooth color transitions:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface GradientMeshShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  complexity?: number;  saturation?: number;  contrast?: number;  colorShift?: number;}const fragmentShader = `// Hash function for noise generationfloat hash(vec2 p) {    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);}// Smooth noise functionfloat noise(vec2 p) {    vec2 i = floor(p);    vec2 f = fract(p);    f = f * f * (3.0 - 2.0 * f);    float a = hash(i);    float b = hash(i + vec2(1.0, 0.0));    float c = hash(i + vec2(0.0, 1.0));    float d = hash(i + vec2(1.0, 1.0));    return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);}// Fractal Brownian Motion for organic patternsfloat fbm(vec2 p) {    float value = 0.0;    float amplitude = 0.5;    float frequency = 1.0;    for (int i = 0; i < 4; i++) {        value += amplitude * noise(p * frequency);        amplitude *= 0.5;        frequency *= 2.0;    }    return value;}// Generate gradient control pointsvec2 gradientPoint(int index, float time) {    float angle = float(index) * 2.39996 + time * 0.5; // Golden angle for even distribution    float radius = 0.3 + 0.4 * sin(time * 0.3 + float(index));    return vec2(        0.5 + radius * cos(angle),        0.5 + radius * sin(angle)    );}// Color palette functionvec3 palette(float t) {    // Create vibrant color transitions through spectrum    vec3 a = vec3(0.2, 0.2, 0.2);    vec3 b = vec3(0.8, 0.8, 0.8);    vec3 c = vec3(1.0, 1.0, 1.0);    vec3 d = vec3(0.0, 0.33, 0.67);    return a + b * cos(6.28318 * (c * t + d));}// Smooth minimum function for blendingfloat smin(float a, float b, float k) {    float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);    return mix(b, a, h) - k * h * (1.0 - h);}// Generate mesh gradientvec3 generateMeshGradient(vec2 uv, float time) {    float minDist = 1000.0;    vec3 finalColor = vec3(0.0);    // Number of gradient control points    const int numPoints = 6;    // Calculate influence from each gradient point    for (int i = 0; i < numPoints; i++) {        vec2 point = gradientPoint(i, time);        float dist = distance(uv, point);        // Create smooth falloff        float influence = 1.0 / (1.0 + dist * dist * 8.0);        // Color for this point based on position and time        float colorIndex = float(i) / float(numPoints) + time * u_colorShift * 0.1;        vec3 pointColor = palette(colorIndex);        finalColor += pointColor * influence;        minDist = smin(minDist, dist, 0.3);    }    // Add some organic variation with noise    float noiseValue = fbm(uv * u_complexity * 3.0 + time * u_speed * 0.5);    finalColor += noiseValue * 0.1;    // Enhance with additional gradient layers    vec2 center = vec2(0.5);    float centerDist = distance(uv, center);    float radialGrad = 1.0 - smoothstep(0.0, 1.0, centerDist);    // Add radial enhancement    finalColor *= 0.8 + radialGrad * 0.4;    return finalColor;}// Smooth color transitionsvec3 enhanceGradient(vec3 baseColor, vec2 uv, float time) {    // Add subtle color shifts across the surface    float shift1 = sin(uv.x * 3.14159 + time * u_speed) * 0.1;    float shift2 = cos(uv.y * 3.14159 + time * u_speed * 1.3) * 0.1;    baseColor.r += shift1;    baseColor.g += shift2;    baseColor.b += sin(time * u_speed * 0.7) * 0.05;    // Apply saturation control    float gray = dot(baseColor, vec3(0.299, 0.587, 0.114));    baseColor = mix(vec3(gray), baseColor, u_saturation);    // Apply contrast    baseColor = (baseColor - 0.5) * u_contrast + 0.5;    return baseColor;}void mainImage( out vec4 fragColor, in vec2 fragCoord ) {    vec2 uv = fragCoord / iResolution.xy;    float time = iTime * u_speed;    // Generate base mesh gradient    vec3 gradient = generateMeshGradient(uv, time);    // Enhance with additional effects    gradient = enhanceGradient(gradient, uv, time);    // Add subtle animation variations    float pulse = sin(time * 2.0) * 0.05 + 1.0;    gradient *= pulse;    // Ensure colors stay in valid range    gradient = clamp(gradient, 0.0, 1.0);    fragColor = vec4(gradient, 1.0);}`;export const GradientMeshShaders = forwardRef<HTMLDivElement, GradientMeshShadersProps>(({  className,  speed = 1.0,  complexity = 1.0,  saturation = 1.0,  contrast = 1.0,  colorShift = 1.0,  ...props}, ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={fragmentShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_complexity: { type: '1f', value: complexity },          u_saturation: { type: '1f', value: saturation },          u_contrast: { type: '1f', value: contrast },          u_colorShift: { type: '1f', value: colorShift },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});GradientMeshShaders.displayName = "GradientMeshShaders";

Original shader by Dov Azencot

Perfect for React 19, Next.js 15, and modern TypeScript projects. Gradient mesh patterns rendered entirely on GPU using GLSL color algorithms with smooth blending. Customizable speed, complexity, saturation, contrast, and color cycling. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/gradient-mesh-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/gradient-mesh-shaders.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/gradient-mesh-shaders.json

bunx shadcn@latest add https://www.shadcn.io/registry/gradient-mesh-shaders.json

Usage

import { GradientMeshShaders } from "@/components/ui/gradient-mesh-shaders";

export default function ModernBackground() {
  return (
    <GradientMeshShaders
      speed={1.0}
      complexity={1.0}
      saturation={1.2}
      contrast={1.1}
      colorShift={1.0}
    >
      <div className="relative z-10">
        <h1>Content over gradient mesh</h1>
      </div>
    </GradientMeshShaders>
  );
}

Why gradient animations struggle with smoothness

CSS linear gradients are static and limited to two points. SVG mesh gradients lack animation capabilities. Most libraries use DOM manipulation for gradient changes that causes janky animations and poor performance.

GPU color algorithms solve this with mathematical gradient interpolation. Multiple control points move organically through space. Smooth minimum functions blend colors naturally. Real-time color cycling creates dynamic spectrum transitions.

This React gradient mesh uses GLSL mathematics for smooth color blending. Multiple gradient control points with orbital movement. Fractal noise adds organic variation. Palette functions create smooth spectrum cycling like professional design tools.

React gradient mesh shader features

Multi-point gradients - Six control points create complex gradient patterns with smooth blending
Organic movement - Control points follow orbital paths with natural timing variations
Spectrum cycling - Smooth color transitions through entire spectrum with palette functions
Fractal noise texture - Organic variation adds natural complexity to gradient surfaces
Radial enhancement - Center-focused lighting creates depth and visual interest
Saturation control - Adjust color intensity from subtle pastels to vivid gradients
Contrast adjustment - Fine-tune gradient contrast for different visual styles
Smooth minimum blending - Mathematical functions create natural color transitions
Color shift timing - Independent control of spectrum cycling speed and direction
Dynamic pulse effects - Subtle brightness variations add life to static gradients
TypeScript React component - Full IDE support with prop definitions
Next.js compatible - Works with App Router and modern React patterns
shadcn/ui integration - Consistent with Tailwind CSS design systems
Copy-paste installation - No vendor lock-in, you own the shader code
Mobile optimized - Efficient GPU gradient calculation for smooth mobile performance

API Reference

GradientMeshShaders

Main container component for the dynamic gradient mesh effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Animation and movement speed (0.1 to 3.0)
`complexity`	`number`	`1.0`	Gradient pattern complexity (0.5 to 2.0)
`saturation`	`number`	`1.0`	Color saturation level (0.0 to 2.0)
`contrast`	`number`	`1.0`	Gradient contrast adjustment (0.5 to 2.0)
`colorShift`	`number`	`1.0`	Color spectrum cycling speed (0.1 to 3.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

GPU gradient mesh troubleshooting

Gradients too subtle: Increase contrast to 1.5+ for more dramatic color differences. GPU gradients blend smoothly which may appear subtle compared to sharp CSS transitions.

Colors too muted: Boost saturation to 1.5 for vivid gradient colors. Lower to 0.5 for pastel, minimal gradient effects perfect for subtle backgrounds.

Animation too slow/fast: Adjust speed for comfortable gradient movement. 0.5 creates slow, meditative shifts. 2.0+ creates dynamic, energetic color cycling.

Pattern too simple: Increase complexity to 1.5+ for more intricate gradient variations. Higher complexity adds fractal noise detail to gradient surfaces.

Color cycling too rapid: Lower colorShift to 0.5 for slower spectrum transitions. Higher values create rapid rainbow effects good for dynamic interfaces.

Mobile performance issues: GPU gradient calculations are intensive. Lower complexity to 0.8 and speed to 0.8 on mobile devices for smoother performance.

GPU compatibility: Gradient mesh effects require GPU for real-time color calculation. Provide CSS gradient fallbacks for older devices without sufficient processing power.

React Gradient Mesh Shaders

React gradient mesh with GPU color blending

Installation

Usage

Why gradient animations struggle with smoothness

React gradient mesh shader features

API Reference

GradientMeshShaders

GPU gradient mesh troubleshooting

More React shader components

Kaleidoscope Shaders

Ripple Shaders

Plasma Shaders

Nebula Shaders

Matrix Shaders

Aurora Shaders

React gradient mesh FAQ

On this page

React Gradient Mesh Shaders