Liquid Gradient Bg: Premium Backgrounds Component by Zeroqode

A smooth, animated gradient background with flowing liquid-like motion. Fully customizable colors, speed, and blur to create immersive, modern backdrops for hero sections, landing pages, or any layout that needs a touch of organic movement.

About this Component

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.

Key Features

- 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.

How to Set Up

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