Floating Shapes
Three colored orbs with blur 60 px drift out of phase over a dark background — pure-CSS ambient effect, zero JavaScript.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
How it works
The effect uses three <div> elements positioned absolutely inside .bg-floating-shapes, shaped into discs with border-radius: 50%. Everything is pure CSS: the 20-second @keyframes floatShapes animation chains four keyframes that combine diagonal translations (±50 px) and a full rotation (0° → 270°), with an ease-in-out curve that softens each direction reversal.
The visual signature comes from two combined properties: filter: blur(60px) turns each solid disc into a soft, feathered glow; opacity: 0.5 makes the glows semi-transparent, so where indigo (#6366f1), pink (#d946ef) and cyan (#06b6d4) overlap they composite optically — the mixed color emerges naturally without extra layers or complex gradients.
The three shapes share the same animation but carry different negative delays (0 s, −5 s, −10 s). A negative delay starts the animation at an already-advanced point in the cycle: the three orbs are always at different positions, their overlap shifting continuously and organically, never visibly synchronizing.
The container has overflow: hidden — the shapes are intentionally oversized and partially outside the edges (top: −100 px, right: −150 px…) so the glow covers every corner without gaps. Overlay content (text, buttons) sits on top via normal flow or position: absolute; z-index: 1.
Accessibility
- prefers-reduced-motion not handled: the source code does not detect this OS preference — the animation always runs. Add
@media (prefers-reduced-motion: reduce) { .shape { animation: none; } }manually if your project requires it. - The shapes are purely decorative: add
aria-hidden="true"on the.bg-floating-shapescontainer to hide it from screen readers. - No keyboard interaction or JavaScript: the component is passive, no focus trap, no events to handle.
- Overlay text must meet WCAG AA contrast (ratio ≥ 4.5:1) against the dark background — re-check the ratio if you change shape opacity or colors.
- No canvas: no
roleoraria-labelattributes are needed on the shapes themselves.
Browser compatibility
Requires filter: blur() and CSS Animations — supported in all modern browsers since 2020.
If <code>filter</code> is not supported (IE 11), shapes render as solid colored discs without blur — the background stays colored, the page stays functional, no JS errors.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="bg-floating-shapes">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<!-- Optional: overlay content -->
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| background on .shape-1 / .shape-2 / .shape-3 | #6366f1 / #d946ef / #06b6d4 | Colors of the three orbs — swap in your brand palette. Each shape accepts any valid CSS color value (hex, hsl, gradient). |
| width / height on .shape-1 / .shape-2 / .shape-3 | 300 px / 400 px / 250 px | Orb size. Larger shapes cover more area; drop to 150–200 px for a thinner, more subtle background. |
| filter: blur(…) on .shape | 60px | Blur radius for all orbs. 40 px = slightly defined edges, 80 px+ = very soft atmospheric halos. |
| opacity on .shape | 0.5 | Halo intensity. 0.3 = very subtle background, 0.7 = saturated and prominent — also affects the intensity of optical blending at intersections. |
| animation-duration on .shape | 20s | Duration of one full cycle. 12 s = noticeable and dynamic, 30 s+ = near-imperceptible drift, more cinematic. |
| translate(50px, -50px) in @keyframes floatShapes | 50 px / −50 px | Movement amplitude at each keyframe. ±20 px = almost-static background, ±80 px = very pronounced drift. |
| background on .bg-floating-shapes | #0a0a0f | Background color behind the orbs — swap to your section color to integrate the effect into any theme. |
FAQ
div elements, one @keyframes rule, and filter, opacity, and animation properties. No JS file is needed. Drop the HTML and CSS into a React, Vue, Angular, or any other framework project — it works without extra configuration..shape in the HTML, give it a unique name (e.g. .shape-4), set its background, size, and position in the CSS, then add a negative animation-delay different from the three existing ones (e.g. -15s for a 75% phase offset). The new shape automatically inherits the floatShapes animation.transform and filter to the GPU via its compositor — the three elements are promoted to their own render layers, keeping the CPU nearly idle. On a low-end mobile device, reduce the blur to 40px and opacity to 0.3 to lighten the compositing load.
