Skip to content
WebTricks

Liquid glass card

An Apple-style liquid glass card with real SVG refraction — the backdrop bends through the glass. Pure CSS plus an SVG filter, no JavaScript.

  • card
  • glass
  • liquid-glass
  • backdrop-filter
  • svg
  • effect
Blur4px
Saturation180%
Corner radius28px
Glass tint (rgba)rgba(255, 255, 255, 0.10)
HTML 
<svg width="0" height="0" aria-hidden="true" style="position:absolute"><filter id="lg-refract" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency="0.008 0.012" numOctaves="2" seed="9" result="n"/><feGaussianBlur in="n" stdDeviation="1.4" result="s"/><feDisplacementMap in="SourceGraphic" in2="s" scale="40" xChannelSelector="R" yChannelSelector="G"/></filter></svg><div class="liquid-glass"><h3>Liquid glass</h3><p>The colors behind bend and ripple through the glass.</p></div>
CSS 
:root {
    --blur: 4px;
    --sat: 180%;
    --radius: 28px;
    --tint: rgba(255, 255, 255, 0.10);
}

.liquid-glass {
    position: relative;
    isolation: isolate;
    max-width: 300px;
    padding: 28px;
    border-radius: var(--radius);
    color: #fff;

    background: var(--tint);
    backdrop-filter: blur(var(--blur)) saturate(var(--sat)) brightness(1.1);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) brightness(1.1);

    /* Lift shadow + a refractive rim: bright inset highlights on every edge */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 1px rgba(255, 255, 255, 0.30),
        inset 1px 0 1px rgba(255, 255, 255, 0.20),
        inset -1px 0 1px rgba(255, 255, 255, 0.20);
}

/* Real refraction: feed the SVG displacement filter (in the HTML below) into
   backdrop-filter so the backdrop actually bends. Chromium-only today, so it
   is gated behind @supports — elsewhere the frosted glass above is used. */
@supports (backdrop-filter: url('#lg-refract')) {
    .liquid-glass {
        backdrop-filter: blur(var(--blur)) saturate(var(--sat)) brightness(1.1) url('#lg-refract');
    }
}

/* Glossy diagonal sheen below the text — sells the "liquid" highlight */
.liquid-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.08) 28%,
        transparent 58%
    );
    mix-blend-mode: screen;
}

.liquid-glass h3 { margin: 0 0 8px; }
.liquid-glass p  { margin: 0; opacity: 0.92; }

How it works

This is the real thing — the backdrop bends through the glass, not just blurs.

  • The inline SVG filter (see the HTML block above) makes noise with feTurbulence, softens it, then feDisplacementMap pushes the backdrop’s pixels around: the noise’s red channel shifts them horizontally, green vertically, and scale sets how far.
  • That filter is fed into backdrop-filter so it warps what’s behind the card — the card’s own text stays perfectly crisp.
  • A frosted base (blur() saturate() brightness()), a four-sided refractive rim of inset shadows, and a glossy ::after sheen complete the look.

Browser support: SVG filters as a backdrop-filter input work in Chromium today, not yet in Safari or Firefox — that’s why the refraction is wrapped in @supports; those browsers fall back to plain frosted glass. Copy both the HTML (for the <svg> filter) and the CSS.

Like any glass effect it needs a busy, colorful background to be visible. For the flat frosted variant see the glassmorphism card; the deeper walkthrough is in Liquid glass in CSS.

Performance: displacement filters are heavier than a plain blur — great for one hero card, not for dozens of scrolling surfaces.