Effects / CSS
Glassmorphism
Frosted, translucent panels floating over colorful moving shapes.
Glass cardContinue
Prompt to build it
Build a glassmorphism card over drifting gradient blobs. Use backdrop-filter: blur(20px) saturate(160%), rgba white fill, a 1px light border, and 3 slowly moving blurred color blobs behind. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.
Tested code
One self-contained HTML file with no libraries: the same code that runs above. Your AI gets it from Flow's get_effect tool.
Show the code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glassmorphism | Flow effect</title>
<!--
Flow effect: Glassmorphism (https://flow.donta.io/effects/glassmorphism)
Self-contained: no libraries. Copy the .fx-stage element, the CSS and the
script into your project and size .fx-stage however you like.
-->
<style>
:root { --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --body: ui-sans-serif, system-ui, sans-serif; }
html, body { margin: 0; min-height: 100%; background: #0e0e10; display: grid; place-items: center; }
.fx-stage { width: min(100vw, 960px); }
/* Stage that every effect fills. Container units (cqw/cqmin) size the art. */
.fx-stage {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 16px;
container-type: size;
background: #111;
isolation: isolate;
}
.fx-fill {
position: absolute;
inset: 0;
}
.fx-fallback {
position: absolute;
inset: 0;
}
.fx-center {
display: grid;
place-items: center;
}
/* ── Glassmorphism ────────────────────────────── */
.fx-glass { background: #1b1033; }
.fx-glass i {
position: absolute;
border-radius: 50%;
filter: blur(4cqmin);
animation: fx-glass-drift 9s ease-in-out infinite alternate;
}
.fx-glass .g1 { width: 46cqmin; height: 46cqmin; left: 8%; top: 4%; background: #ff4fa3; }
.fx-glass .g2 { width: 40cqmin; height: 40cqmin; right: 6%; top: 18%; background: #5b7bff; animation-delay: -3s; }
.fx-glass .g3 { width: 36cqmin; height: 36cqmin; left: 34%; bottom: -6%; background: #ffc247; animation-delay: -6s; }
@keyframes fx-glass-drift { to { translate: 8cqmin 6cqmin; scale: 1.15; } }
.fx-glass-card {
position: relative;
width: 52cqmin;
padding: 5cqmin;
border-radius: 4cqmin;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
color: #fff;
display: grid;
gap: 2.4cqmin;
font: 600 4cqmin/1.2 var(--body);
}
@supports not (backdrop-filter: blur(1px)) {
.fx-glass-card { background: rgba(40, 24, 70, 0.9); }
}
.fx-glass-card span { height: 2cqmin; border-radius: 99px; background: rgba(255, 255, 255, 0.35); }
.fx-glass-card em {
justify-self: end;
font-style: normal;
font-size: 3.4cqmin;
padding: 1.6cqmin 3.4cqmin;
border-radius: 99px;
background: rgba(255, 255, 255, 0.9);
color: #2a1650;
}
@media (prefers-reduced-motion: reduce) {
.fx-stage *, .fx-stage *::before, .fx-stage *::after { animation-play-state: paused !important; }
}
</style>
</head>
<body>
<div class="fx-stage">
<div class="fx-fill fx-center fx-glass"><i class="g1"></i><i class="g2"></i><i class="g3"></i>
<div class="fx-glass-card">Glass card<span style="width:90%"></span><span style="width:70%"></span><em>Continue</em></div></div>
</div>
</body>
</html>
How it works
A panel with backdrop-filter: blur and saturate, a semi-transparent fill and a light 1px border sits over animated gradient blobs.
Guardrails
- Provide a solid background fallback when backdrop-filter isn't supported or contrast drops.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.