Shader Gradient

Shader Gradient is a tool for creating moving, animated gradient backgrounds. It’s available as a Framer plugin, a Figma plugin, and a React component, so you can use it in the design tool you already work with. The gradients are not static — they shift, flow, and react in real time, giving websites a lively, custom look.

The tool gives you a lot of control. You can adjust the shape of the gradient, pick colors (including hex codes), and tweak noise strength, noise density, spiral, speed, grain, lighting, position, and rotation. There’s also an animation parameter to set how the gradient moves. Everything updates live as you change sliders. For Framer users, you can drop in the plugin and start styling immediately. Figma users get a similar drag-and-drop experience. Developers can import the npm package and control the gradient via props.

Shader Gradient is best for web designers and developers who want to add subtle or dramatic motion to backgrounds without writing shaders from scratch. It works especially well for hero sections, landing pages, and any area where you want a background that feels alive. The tool is built by Ruucm and Seungmee, and it’s available for free through the Framer Marketplace, Figma Community, and GitHub.