ShaderGradient is a free tool for crafting animated, WebGL-powered gradients with depth and movement: adjust shape (plane, sphere, water plane), color, motion speed, noise and lighting live, then export as a URL string or a ready React/Framer component.
Free: open source, available on GitHub, with a live customization interface at shadergradient.co.
Designers wanting a distinctive animated gradient background or hero effect without hand-writing WebGL shader code.
Test performance on lower-powered devices before shipping. WebGL shader backgrounds are more GPU-intensive than a static or CSS gradient, which can matter for mobile page-load and battery impact.
Create animated gradients for Framer and Figma.
