New Wave Gradient

WaveGradient is an animated background component powered by a custom WebGL shader. It blends up to 4 colors into a smooth, organic flow that reacts to mouse and touch movement in real time.

Features

• Up to 4 fully customizable colors

• Seed control — change the pattern shape without touching the colors

• Adjustable speed, amplitude, softness, and blend style

• Mouse and touch parallax with configurable strength

• Respects prefers-reduced-motion

• Static, interactive canvas preview - see your color changes instantly

Use cases

Works as a hero background, section fill, card background, or full-page layer. Scales to any size.

How to use

Drop it onto the canvas, resize to fit, and adjust colors from the property panel. All controls are live, no code needed.

Designed and developed with the help of a star @Oliwia Mikołajczak