The Liquid Gradient Background is an interactive WebGL Framer component featuring fluid, cursor-reactive gradients with water-ripple effects. It includes two visual engines (Liquid Gradient and Gold Noise), 10 color presets, and a fully custom mode.
- Two Visual Engines - Liquid Gradient renders up to 12 animated color blobs with radial overlays, film grain, and cursor-driven distortion. Gold Noise produces a calm 4D simplex-noise field with an optional radial glow. Switch between them via the Scheme property.
- Interactive Mouse / Touch FX - Cursor or touch movement distorts the gradient in real time - water ripples in Liquid mode, a golden "spark" trail in Gold Noise mode. The effect fades automatically and doesn't block pointer events from elements above.
- Ten Presets + Custom Mode - Choose from ten curated palettes (from bold Orange/Navy to neon Cyberpunk to holographic Iridescent), or unlock manual control of all six color slots and the base color with Custom mode.
- Deep Customization - Fine-tune speed, intensity, grain, blob size, blob count, warm/cool weights, and border radius from the properties panel. Gold Noise mode offers its own controls: noise scale, opacity, glow toggle, color, size, and position.
1. Drag & Drop the Liquid Gradient Background component onto your canvas in Framer.
2. In the property panel, pick a Scheme from ten curated presets, or choose Custom to set your own colors.
3. Tweak Speed, Mouse FX, and Radius to fit your section.
4. To use the noise aesthetic, select the Gold Noise scheme - the panel swaps to noise-specific controls (Noise color, Background, Scale, Opacity, Glow).
5. Optionally enable Animate in Editor if you want the live WebGL animation on the canvas; otherwise it runs only in Preview and on the published site.
6. Preview your project to see the full animation in action.
For more details on installation and component properties, please refer to the documentation - https://docs.zeroqode.com/framer-plugins/liquid-gradient-background
- Creative agency and portfolio sites aiming for a high-end, interactive first impression
- Tech and SaaS landing pages that need a dynamic, premium hero section
- Web3 and crypto projects requiring futuristic, fluid backgrounds
- Any project looking to increase user engagement with cursor-reactive, tactile WebGL effects
💬 For any questions, feel free to contact us at this support email: support@zeroqode.com
The Liquid Gradient Background is an interactive WebGL Framer component featuring fluid, cursor-reactive gradients with water-ripple effects. It includes two visual engines (Liquid Gradient and Gold Noise), 10 color presets, and a fully custom mode.
- Two Visual Engines - Liquid Gradient renders up to 12 animated color blobs with radial overlays, film grain, and cursor-driven distortion. Gold Noise produces a calm 4D simplex-noise field with an optional radial glow. Switch between them via the Scheme property.
- Interactive Mouse / Touch FX - Cursor or touch movement distorts the gradient in real time - water ripples in Liquid mode, a golden "spark" trail in Gold Noise mode. The effect fades automatically and doesn't block pointer events from elements above.
- Ten Presets + Custom Mode - Choose from ten curated palettes (from bold Orange/Navy to neon Cyberpunk to holographic Iridescent), or unlock manual control of all six color slots and the base color with Custom mode.
- Deep Customization - Fine-tune speed, intensity, grain, blob size, blob count, warm/cool weights, and border radius from the properties panel. Gold Noise mode offers its own controls: noise scale, opacity, glow toggle, color, size, and position.
1. Drag & Drop the Liquid Gradient Background component onto your canvas in Framer.
2. In the property panel, pick a Scheme from ten curated presets, or choose Custom to set your own colors.
3. Tweak Speed, Mouse FX, and Radius to fit your section.
4. To use the noise aesthetic, select the Gold Noise scheme - the panel swaps to noise-specific controls (Noise color, Background, Scale, Opacity, Glow).
5. Optionally enable Animate in Editor if you want the live WebGL animation on the canvas; otherwise it runs only in Preview and on the published site.
6. Preview your project to see the full animation in action.
For more details on installation and component properties, please refer to the documentation - https://docs.zeroqode.com/framer-plugins/liquid-gradient-background
- Creative agency and portfolio sites aiming for a high-end, interactive first impression
- Tech and SaaS landing pages that need a dynamic, premium hero section
- Web3 and crypto projects requiring futuristic, fluid backgrounds
- Any project looking to increase user engagement with cursor-reactive, tactile WebGL effects
💬 For any questions, feel free to contact us at this support email: support@zeroqode.com
