Animated gradient mesh background with WebGL shader. Creates smooth, organic color transitions using simplex noise.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

color1

• Type: string - Default: '#6366f1'
• First corner color (hex)

color2

• Type: string - Default: '#8b5cf6'
• Second corner color (hex)

color3

• Type: string - Default: '#ec4899'
• Third corner color (hex)

color4

• Type: string - Default: '#f59e0b'
• Fourth corner color (hex)

speed

• Type: number - Default: 0.3
• Animation speed (0-1)

complexity

• Type: number - Default: 2.0
• Noise complexity (0-5)

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

className

• Type: string
• Additional CSS class

Customization

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-gradient-mesh
• .cc-gradient-mesh__canvas