Build a Fluid Gradient Background in Webflow (No Code)

Add a living, interactive fluid gradient background to any Webflow page — liquid color that swirls under the cursor and reacts to every move — with a single custom attribute and zero code. It’s the kind of hero background that makes a page feel alive instead of flat, and you configure all of it from Webflow’s settings panel.

What makes this approach so friendly is that the hard part is already done. A three.js-powered component ships with sensible defaults for every parameter, so the bare-minimum setup is one attribute and you’re live. When you do want to customize — colors, softness, flow speed, how strongly it reacts to the mouse — a hidden GUI lets you tune everything in real time on the page, so you skip the miserable publish-check-tweak-republish loop.

And it scales from a quick background to a full hero section, where you can even wire the gradient into a CTA button so its colors surge on hover. Same component, same attributes — just more of them.

How it works

Everything hinges on one element and one attribute. You drop a div where you want the background — its class name doesn’t matter at all — and give it fc-fluid-gradient="component". That attribute is what the script hunts for; it marks the element as the canvas the effect draws onto. Position that div absolutely so it fills a position: relative parent (a section at 100vh, say), and the fluid fills the whole area behind your content.

The effect itself is WebGL. Inside a “scripts” component sit a few embeds: the first ones hold shaders — small programs that run on your GPU and decide how each pixel is drawn — and the last holds the script that wires them together with three.js, a library that makes 3D in the browser manageable without hand-writing hundreds of lines of raw WebGL. The reason you don’t have to configure anything to see it working is that the script bakes in a sensible default for every single parameter, from brush size to decay to the four colors. You override only what you care about.

Because this is such a visual effect, the smart move isn’t guessing values in attributes — it’s the built-in GUI. Add fc-fluid-gradient-gooey="true" and the live page gains a control panel where you drag sliders and watch the gradient respond instantly. Brush size sets how wide the ink swirls are; flow speed is a global multiplier for how fast the fluid evolves (zero freezes it); distortion controls how wavy and psychedelic it looks; softness feathers the color transitions; idle speed decides how much it drifts with no interaction at all. You tune until it feels right, then move those values into attributes.

The hero scenario adds one nice trick: tying the background to a button. Put fc-fluid-gradient-cta on your primary CTA and, on hover or focus, the gradient’s color intensity multiplies — above one it surges brighter, below one it dims. Two companion attributes, transition duration and easing, control that shift, and the easing values follow GSAP’s easing names. The gotcha worth remembering: match the duration and easing to the CSS transition already on your button, so the color surge and the button’s own hover animation move together instead of fighting each other.

How to use it

1. Clone the project. Grab the Webflow cloneable — it includes the page structure, the styling, and the scripts component, with the full parameter documentation at the bottom of the cloned page.

2. Add the background canvas. Inside a position: relative section, add a div and set it to position: absolute, full (all offsets 0), so it fills the section. Give it the attribute fc-fluid-gradient="component". The class name is irrelevant — only the attribute matters.

3. Include the scripts component. Drop the “interactive fluid gradient scripts” component onto the page so the shaders and the three.js script load.

4. Publish as-is. Open the live link and you already have a working, interactive background running entirely on defaults.

5. Turn on the GUI to tune it. Add fc-fluid-gradient-gooey="true" to the same element, publish, and adjust the parameters live on the page until it looks right. Note the values you settle on.

6. Apply your settings as attributes. Move the values from the GUI onto the element as the parameter attributes documented at the bottom of the cloned page (brush size, flow speed, distortion, softness, idle speed, the four colors, and so on). Leave any you don’t set at their defaults.

7. Wire a CTA (optional). On your primary button, add fc-fluid-gradient-cta for the hover/focus intensity boost, plus fc-fluid-gradient-transition-duration and fc-fluid-gradient-transition-easing. Match those two to the CSS transition already on the button so the effect feels seamless.