Interactive Fluid Gradient Background | Webflow No Code Tutorial

How it works

Implement in Webflow
Apply the attributes to the elements inside the page
Below is a list ofelements andoptions to apply the fluid gradient background effect.
component
I want this
Element
to get the fluid gradient background effect.
Add this attribute
Name
fc-fluid-gradient

Value
component

Description
Defines the HTML element for the fluid gradient background effect.
CTA BUTTON (OPTIONAL)
I want this
Element
to temporarily change color intensity on hover/focus.
Add this attribute
Name
fc-fluid-gradient-cta

Value
1.15

Description
Defines a button to boost or reduce the color intensity of the fluid on hover or focus.
Type: number (multiplier)
Default: 1.15
Clamped: 0.1–3.0
Use: Multiplies the base color intensity while the CTA is active.
Option
hover
I want to enable pointer-driven interaction on devices with a fine pointer (mouse).
Add this attribute
Name
fc-fluid-gradient-hover

Value
true

Description
This value enables pointer-driven interaction on devices with a fine pointer (mouse). When false, the fluid still runs but won’t react to mouse movement.
Type: boolean (true | false)
Default: true
Where?
This attribute should be applied to the component.
Option
dpr max
I want to cap the renderer pixel ratio.
Add this attribute
Name
fc-fluid-gradient-dpr-max

Value
2.0

Description
This value caps the renderer pixel ratio: pixelRatio = min(window.devicePixelRatio, dprMax).
Type: number (≥1)
Default: 2.0
Use
1–2 for content-heavy pages
up to 3 for showcase/high-DPI, mindful of GPU cost.
Where?
This attribute should be applied to the component.
Option
brush size
I want to state the size of the brush when interacting with the fluid.
Add this attribute
Name
fc-fluid-gradient-brush-size

Value
25.0

Description
This value controls how big the “ink brush” is when you move your mouse.
Type: number (px in simulation space)
Default: 25.0
Range: 1–200
Use
Lower values (5–15): create very sharp, fine trails. Great for subtle backgrounds or when you don’t want the effect to be too distracting.
Medium values (20–50): a good balance for most hero sections — the gradient feels fluid and visible without overwhelming the page.
High values (80+): big, bold swirls that cover large areas. Eye-catching for showpieces, but heavier on performance.
💡 Tip: The code automatically scales the brush with pointer speed, so fast movements already “inflate” the brush a bit.
Where?
This attribute should be applied to the component.
Option
brush strength
I want to state how strongly the brush pushes the fluid.
Add this attribute
Name
fc-fluid-gradient-brush-strength

Value
0.5

Description
This value sets how strongly your brush pushes the fluid.
Type: number
Default: 0.5
Range: 0.05–3
Use
Lower values (0.1–0.3): gentle strokes, the fluid barely ripples. Ideal when you want the background to stay calm.
Medium values (0.4–0.8): noticeable interaction without being overwhelming — recommended for most use cases.
High values (1.0+): very energetic swirls. Fun for experiments, but too high can make the gradient chaotic and distracting.
💡 Tip: Combine a large size with a low strength to create wide, slow-moving clouds. Reverse it (small size + high strength) for sharp, energetic details.
Where?
This attribute should be applied to the component.
Option
fluid decay
I want to control how quickly the motion "fades away".
Add this attribute
Name
fc-fluid-gradient-fluid-decay

Value
0.98

Description
This value controls how quickly the motion “fades away.”
Type: number
Default: 0.98
Range: 0.90–0.999
Use
Lower values (0.90–0.94): the fluid dies out quickly, so trails disappear fast. Good for light backgrounds where you don’t want long-lasting effects.
Medium values (0.95–0.98): a natural feel where movement lingers briefly. Perfect for balanced hero backgrounds.
Higher values (0.99+): swirls remain for a long time, creating dreamy, cloud-like patterns. Beautiful but can get visually heavy if overused.
💡 Tip: For mobile, keep this lower (≤0.96) to avoid too much “history” piling up.
Where?
This attribute should be applied to the component.
Option
trail length
I want to state how long the visible streaks of motion remain before fading.
Add this attribute
Name
fc-fluid-gradient-trail-length

Value
0.8

Description
This value defines how long the visible streaks of motion remain before fading.
Type: number
Default: 0.8
Range: 0.5–0.999
Use
Lower values (0.5–0.7): very short trails, almost like sparks. Keeps the animation subtle.
Medium values (0.75–0.85): smooth fading trails that feel alive without being excessive — best all-round choice.
High values (0.9+): extra-long trails, almost like smoke or paint in water. Dramatic effect but can make the screen busy.
💡 Tip: Pair with a higher fluidDecay for “slow motion ink” effects.
Where?
This attribute should be applied to the component.
Option
fluid stop decay
I want to state how quickly the fluid slows down when the pointer stops moving.
Add this attribute
Name
fc-fluid-gradient-stop-decay

Value
0.85

Description
This value sets how quickly the fluid slows down when the pointer stops moving.
Type: number
Default: 0.85
Range: 0.5–1.0
Use
Lower values (0.5–0.7): the fluid settles almost immediately. Good if you want calm pauses.
Medium values (0.75–0.9): trails relax naturally after interaction. Feels smooth and not too aggressive.
High values (0.9+): motion continues flowing even after you stop. Great for making the background always “alive.”
💡 Tip: Keep this value below fluidDecay for more natural behavior.
Where?
This attribute should be applied to the component.
Option
flow speed
I want to state a global “time speed” multiplier for the simulation.
Add this attribute
Name
fc-fluid-gradient-flow-speed

Value
1.0

Description
This value sets a global “time speed” multiplier for the simulation.
Type: number
Default: 1.0
Range: 0–1.8
Use
0: freezes the fluid — useful if you want a static snapshot until interaction happens.
0.5: half speed, everything feels calmer and more subtle.
1.0 (default): natural pace, balanced for most use cases.
1.5+: faster swirls, more energetic and lively.
💡 Tip: Try lowering this together with a high trailLength for slow, elegant movements.
Where?
This attribute should be applied to the component.
Option
soft reset frames
I want to state how many frames the fluid should “fade out” during a reset.
Add this attribute
Name
fc-fluid-gradient-soft-reset-frames

Value
12

Description
This value sets how many frames the fluid should “fade out” during a reset.
Type: integer
Default: 12
Use
Lower values (5–10): quick fade, the canvas clears almost instantly.
Medium values (10–20): smooth fade, trails gently dissolve.
Higher values (30+): very slow fade, creating a dreamy transition effect.
💡 Tip: Most users can leave this as default. Only tweak if you notice the fluid clearing too abruptly or too slowly after a reset (like when resizing the window).
Where?
This attribute should be applied to the component.
Option
soft reset strength
I want to state how strongly the fade is applied each frame during a soft reset.
Add this attribute
Name
fc-fluid-gradient-soft-reset-strength

Value
0.15

Description
This value sets how strongly the fade is applied each frame during a soft reset.
Type: number
Default: 0.15
Use
Lower values (0.05–0.1): extremely subtle fade, almost unnoticeable.
Medium values (0.15–0.3): balanced reset that feels smooth but still effective.
Higher values (0.5+): aggressive fade — the canvas clears in just a few frames.
💡 Tip: Combine with soft-reset-frames to fine-tune:
Few frames + high strength = snap reset.
Many frames + low strength = slow dissolve.
Where?
This attribute should be applied to the component.
Option
distortion amount
I want to state how much the color sampling is warped by the fluid (how “wavy” the gradient looks).
Add this attribute
Name
fc-fluid-gradient-distortion-amount

Value
0.15

Description
This value sets how much the color sampling is warped by the fluid (how “wavy” the gradient looks).
Type: number
Default: 2.5
Range: 0–5
Use
0–0.5: almost flat, just a soft gradient — ideal behind dense text.
1–3: lively but readable — good baseline for hero sections.
3–5: very liquid/psychedelic — great for showcases; avoid behind body copy.
💡 Tip: If you see banding at low values, try increasing softness a bit.
Where?
This attribute should be applied to the component.
Option
colors 1...4
I want to state the 4-color palette used to render the gradient. Colors are converted to linear space for accurate mixing.
Add this attribute
Name
fc-fluid-gradient-color-1…4

Value
#ff6f00, #ff0000, #00c8ff, #0044ff

Description
This value sets the 4-color palette used to render the gradient. Colors are converted to linear space for accurate mixing.
Type: CSS color (sRGB)
Defaults: #ff6f00, #ff0000, #00c8ff, #0044ff
Use
High contrast palettes: punchier motion and clearer shapes.
Analogous palettes (close hues): silky, premium look with fewer harsh edges.
One dark + one bright anchor: good readability with UI on top.
💡 Tip: Keep at least one deep color (near-black/low luminance) to ground the image and reduce eye fatigue.
👀 Pay Attention: You can apply up to 4 colors with the following attributes
fc-fluid-gradient-color-1
fc-fluid-gradient-color-2
fc-fluid-gradient-color-3
fc-fluid-gradient-color-4
Where?
This attribute should be applied to the component.
Option
color intensity
I want to state the global multiplier on final color brightness/saturation feel. Also animated by the CTA hooks.
Add this attribute
Name
fc-fluid-gradient-color-intensity

Value
1.0

Description
This value sets the global multiplier on final color brightness/saturation feel. Also animated by the CTA hooks.
Type: number
Default: 1.0
Range: 0.2–3.0
Use
0.2–0.7: muted background; perfect for readable content.
0.8–1.3: balanced presence; recommended default range.
1.5–3.0: bold, neon-like glow; great for promos, can overpower UI.
💡 Tip: If you boost intensity, consider lowering distortion to keep things legible.
Where?
This attribute should be applied to the component.
Option
softness
I want to state color transitions to reduce harsh edges and banding.
Add this attribute
Name
fc-fluid-gradient-softness

Value
1.0

Description
This value sets the color transitions to reduce harsh edges and banding.
Type: number
Default: 1.0
Range: 0–5
Use
0–0.5: crisp edges; more “ink-like.”
0.8–1.5: smooth and premium; good all-rounder.
2–5: very soft, dreamy blends; can look hazy if paired with high intensity.
💡 Tip: Increase softness when exporting screenshots or when gradients show visible steps on large monitors.
Where?
This attribute should be applied to the component.
Option
idle speed
I want to state the subtle background motion even without pointer input.
Add this attribute
Name
fc-fluid-gradient-idle-speed

Value
1.0

Description
This value sets the subtle background motion even without pointer input.
Type: number
Default: 1.0
Range: 0–3
Use
0: no idle motion — stable backdrop for focused content.
0.3–0.8: gentle shimmer; feels alive without distraction.
1.0+: more dynamic idle movement; nice for hero/landing intros.
💡 Tip: On content-heavy pages, prefer ≤0.8 to keep attention on the foreground.
Where?
This attribute should be applied to the component.
Option
transition duration (cta on hover)
I want to state the animation duration for the intensity change (used by GSAP) when hovering over the CTA button.
Add this attribute
Name
fc-fluid-gradient-transition-duration

Value
1.0

Description
This value sets the animation duration for the intensity change (used by GSAP) when hovering over the CTA button.
Type: number (seconds)
Default: None
Where?
This attribute should be applied to the CTA Button.
Option
transition easing (cta on hover)
I want to state the easing for the intensity tween.
Add this attribute
Name
fc-fluid-gradient-transition-easing

Value
power1.out

Description
This value sets the easing for the intensity tween.
Type: string (GSAP ease, e.g. power2.out, expo.inOut)
Default: None
Where?
This attribute should be applied to the CTA Button.
Option
gui
I want to enable the on-page control panel for tuning.
Add this attribute
Name
fc-fluid-gradient-gui

Value
false

Description
This value enables the on-page control panel for tuning.
Type: boolean (true | false)
Default: false
Where?
This attribute should be applied to the component.
Option
gui position
I want to place the GUI panel in a corner.
Add this attribute
Name
fc-fluid-gradient-gui-position

Value
top-right

Description
This value places the GUI panel in a corner.
Type: enum
Default: top-right
Values: top-right | top-left | bottom-right | bottom-left
Where?
This attribute should be applied to the component.
Option
gui title
I want to state the title displayed on the GUI panel
Add this attribute
Name
fc-fluid-gradient-gui-title

Value
Fluid Controls

Description
This value sets the title displayed on the GUI panel
Type: string
Default: top-right
Where?
This attribute should be applied to the component.

Webflow Partner Company

How it works

Implement in Webflow

Apply the attributes to the elements inside the page