Fluid Gradient
Four color blobs blurred at 40 px — indigo, violet, cyan, magenta — on a layer twice the size of the frame, slowly turning and drifting (a 15 s cycle) under a dark vignette and a centered label: a full-frame background that barely moves, pure CSS, 1.6 KB, frozen when the user reduces motion.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Liquid has 31 effects, including 6 free. Explore the category →
3 usage examples
How it works
The .fluid-gradient-container (full width, 300 px tall through its inline style, overflow: hidden) stacks three elements. At the back, .fluid-gradient with inset: -50%: it overhangs by half a width and half a height on each side, i.e. twice the frame's size. It carries four radial gradients that fade out at half radius — indigo #6366f1 bottom left, violet #8b5cf6 top right, cyan #06b6d4 and magenta #d946ef near the center — melted together by filter: blur(40px). Above it, .fluid-overlay darkens the edges (a radial gradient towards black at 50%), then .fluid-text centers the label, white, bold, with a drop shadow.
The fluidFlow animation lasts 15 s, ease-in-out, and takes the layer through four poses: shifted 10% right and up, then 15% down, then left, while turning one full revolution (90° per quarter cycle) and breathing between 95 and 110% of its size. Since the layer is twice the size of the frame, its edge never shows: only the blobs glide and mingle. In 500 ms, 11 to 13% of the frame's pixels change (measured in Chromium, Firefox and WebKit): enough for the eye to feel it alive, too little to draw attention.
The blur makes the material: without it you would see four hard-edged discs turning. It is also the most expensive part, since it applies to a layer four times the frame's area. The browser can however paint that layer once and then move it, because the animation only touches transform: measured in Chromium 151, the page holds its rate (120 frames per second) at 640 × 300 as at 1920 × 1080, with or without blur. Firefox 153 without a graphics card (software rendering) loses half its frames at 640 × 300 with the blur, and struggles full screen with or without it: check on your target machines before using it as a full-screen background.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, the layer stops in its starting pose (animation: none): the four blobs stay blended, the picture is still. Measured in Chromium 151, Firefox 153 and WebKit 26: 0% of pixels changing in 500 ms. - Contrast: the white label sits on moving colors. The vignette and the drop shadow (black
text-shadowat 50%) keep it readable on the original hues; if you switch to light colors (pastels, yellow), darken the vignette or add a dark veil behind the text, as in the perfumer example. - Decoration: the blobs are CSS backgrounds with no role: screen readers only read the text in
.fluid-text.
Browser compatibility
Pure CSS (radial gradients, filter: blur(), a transform animation), 1.6 KB, no dependency. Measured in Chromium 151, Firefox 153 and WebKit 26: same drift, same stop under reduced motion. The 40 px blur on a layer twice the frame's size is the point to watch on machines without a graphics card (see above).
Without filter: blur(), the four blobs stay visible as soft-edged gradient discs, still turning. Without CSS animations, the background is still and the label stays readable. The container gets its height from its inline style (min-height: 300px): if you remove it, give it a height in your CSS.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0400-root">
<div class="fluid-gradient-container" style="width:100%;min-height:300px;">
<div class="fluid-gradient"></div>
<div class="fluid-overlay"></div>
<div class="fluid-text">Fluid Motion</div>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Blob colors (CSS — the four radial-gradients of .fluid-gradient) |
#6366f1, #8b5cf6, #06b6d4, #d946ef |
Each blob has its position (circle at 20% 80%…) and its color. Neighboring hues give a calm background; complementary ones (red and green) mix into brown in the center. |
Blur (CSS — filter: blur(40px)) |
40 px | 60 px melts everything into a haze; 20 px lets the blobs' edges show through. A smaller blur is cheaper to render. |
Cycle length (CSS — animation: 15s … fluidFlow) |
15 s | 30 s gives an almost still background, for a screen people look at for a long time; 8 s a clearly visible drift, best kept for short blocks. |
Vignette (CSS — .fluid-overlay) |
radial-gradient(circle, transparent 0, rgba(10,10,15,.5) 100%) |
Raise the opacity (0.7) for long text or light colors; remove the layer for a bright background from edge to edge. |
Label (HTML/CSS — .fluid-text) |
1.5rem, bold, white, centered | The block takes several lines: give it a width (width: 440px, text-align: center) and compose title, time and subtitle inside. |
FAQ
transform: the browser paints the blurred layer once, then moves it. Measured in Chromium 151: 120 frames per second at 1920 × 1080. Without a graphics card, though (Firefox in software rendering), the 40 px blur on a layer twice the screen's size drags the frame rate down. Test on your target machines; if it stutters, lower the blur to 24 px or shrink the layer (inset: -25%).inset: -50%, it keeps a margin of half a width on each side, and its edges never enter the frame during the rotation. With inset: 0, empty corners would show as soon as it turns a few degrees.
