← All effects
Wavy Gradient
-- fps
prefers-reduced-motion detected — gradient frozen on one frame
X-ray · layers
soft glowing circles
blobs orbit slowly
subtle noise on top
Parameters
Blobs4
Speed0.5
Blob size260 px
Grain0.08
your version · updates as you tinker
How this effect works
A wavy gradient is a few glowing circles on slow orbits. Each blob is a radial gradient — solid color in the middle, transparent at the edge — drawn in "lighter" blend mode so overlapping blobs add up into new colors. The drift layer moves each blob along its own sine-wave orbit, slightly out of phase with the others, which is what makes the whole thing breathe instead of spin.
The film grain layer is a tiny square of random noise, tiled over the canvas at a random offset every frame with very low opacity. It's nearly invisible — but turn it off and the gradient suddenly looks cheap and "banded". Grain is the difference between a screensaver and a cinematic background.
Production notes: respects prefers-reduced-motion (renders one static frame) · cost is proportional to blob count and canvas size — 4 blobs on a hero section is fine on any phone · put text on top with confidence: colors stay in a controlled dark range · the copied snippet is self-contained HTML + JS.