Creates fluid animated gradients using WebGL with Simplex noise. Features organic wave-like motion with multiple color layers blending naturally. Uses custom GLSL shaders for procedural noise generation with dynamic mesh deformation. Supports multi-color palettes with customizable intensity, speed, and complexity. Perfect for hero sections, backgrounds, or creating stunning visual atmospheres.

Mesh Gradient

Fluid animated gradient background.

Colors

Colors pipe-separated hex colors

Color palette for gradient layers. Separate colors with | symbol. Minimum 2 colors required, up to 5 colors recommended for best visual results.

Required (e.g., "#667eea|#764ba2|#f093fb")

Deformation

Intensity 100-800

Vertical mesh displacement strength. Higher creates more dramatic wave-like undulations and movement.

Default: 320

Complexity 1-8

Noise detail level. Higher creates more intricate patterns with finer detail and texture variation.

Default: 3

Animation

Speed 0.1-5.0

Animation tempo multiplier. Higher creates faster flowing movement, lower is more subtle and calming.

Default: 1

Noise Frequency 0.00005-0.0005

Global noise scale. Lower creates larger, smoother waves. Higher creates smaller, more frequent patterns.

Default: 0.00014

Performance

This element uses WebGL with custom GLSL vertex and fragment shaders. Implements 3D Simplex noise algorithm for organic pattern generation with multi-layered color blending. Features dynamic mesh subdivision based on viewport size with continuous requestAnimationFrame loop for fluid 60fps animation. Uses orthographic camera with plane geometry. Very resource intensive - limit to 1 instance per page. Not recommended for mobile devices or low-end hardware due to GPU requirements.