Fluid Gradient
A smooth animated gradient background component for Framer with three customizable colors and fluid motion effects. Perfect for creating eye-catching hero sections.
Make it with Workshop
Build your own component with AI
Fluid Gradient is a code component for Framer designed to help you create stunning animated background effects with smooth, flowing gradients — no coding required.
Built with performance and flexibility in mind, this component features three independent gradient layers that move organically across your canvas, creating mesmerizing fluid motion effects. Simply choose your colors, adjust the blur and speed, and watch your background come to life.
The component uses radial gradients positioned strategically across the canvas, each moving at slightly different speeds to create natural, organic motion. The result is a sophisticated, modern background effect that adds depth and visual interest to any design — perfect for hero sections, landing pages, or anywhere you want to make a bold visual statement.
What's Included:
Three customizable gradient colors
Adjustable blur intensity
Speed control for animation timing
Smooth, organic motion paths
Fully responsive design
Optimized performance
Easy-to-use native Framer controls
Transparent background support
Lifetime updates
Ongoing support
