DEV Community

Vitaliy
Vitaliy

Posted on Originally published at webtricks.dev

Liquid glass CSS — the Apple liquid glass effect with CSS only (plus SVG refraction)

#css #webdev #frontend #design

Originally published at webtricks.dev, where the liquid glass card snippet has a live playground.

Apple's Liquid Glass (introduced across iOS, iPadOS and macOS in 2025) is
the current reference for translucent UI. The good news: around 80% of the look
is plain, well-supported CSS. The catch: the bending refraction — where the
background visibly warps as it passes through the glass — needs an SVG
displacement filter that, today, only Chromium can feed into backdrop-filter.

This guide builds the effect in layers so you can stop at the layer your
support target allows. Every block is copy-paste ready; the control-driven
version lives in the liquid glass card snippet.

What "liquid glass" actually is

Look at a Liquid Glass control up close and you can separate five layers.
Each maps to one CSS feature:

Layer What it does CSS
Tint A faint white (or black) wash so the pane reads as a material, not a hole background: rgba(255,255,255,.1)
Blur + saturation Frosts what is behind and pumps its colors so the glass looks thick backdrop-filter: blur() saturate()
Specular rim A thin bright edge, strongest at the top, where light enters the pane inset box-shadow highlights + a 1px border
Sheen A soft diagonal gloss across the surface a ::after with a linear-gradient and mix-blend-mode: screen
Refraction The backdrop bends near the edges and ripples slightly backdrop-filter: url(#filter) with feDisplacementMap

Classic glassmorphism (the 2020 trend) is layers one to three. Liquid
glass adds the sheen and refraction, and uses stronger saturation so the
material looks lit from inside. If you only need the simpler flat version,
the glassmorphism card snippet is enough.

1. The cross-browser core (liquid glass CSS only)

Frosted glass is backdrop-filter. Liquid glass reads as a thick, lit pane,
and three ingredients do that: tint, blur with saturation, and a rim built
from inset shadows. This block works in every current browser:

.liquid-glass {
  position: relative;
  isolation: isolate;          /* keeps the ::after's z-index inside this box */
  padding: 28px;
  border-radius: 28px;
  color: #fff;

  /* 1. tint */
  background: rgba(255, 255, 255, 0.10);

  /* 2. frost — blur + saturation + a touch of brightness */
  backdrop-filter: blur(8px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(180%) brightness(1.1);

  /* 3. specular rim: strong top highlight, softer on the other edges */
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),                 /* lift */
    inset 0 1px 1px rgba(255, 255, 255, 0.55),      /* top */
    inset 0 -1px 1px rgba(255, 255, 255, 0.30),     /* bottom */
    inset 1px 0 1px rgba(255, 255, 255, 0.20),      /* left */
    inset -1px 0 1px rgba(255, 255, 255, 0.20);     /* right */
}
Enter fullscreen mode Exit fullscreen mode

Then add the diagonal sheen with a pseudo-element, so the surface looks
glossy rather than matte:

.liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                 /* below the text, above the tint */
  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;
}
Enter fullscreen mode Exit fullscreen mode

Why the asymmetric rim? Real glass catches light from above, so the top
inset is roughly twice as bright as the sides. Make all four equal and the
card flattens into an outlined box. If you want to tune the lift shadow and
the inset highlights visually, the box-shadow generator
builds layered inset shadows and copies the whole declaration.

A complete, working liquid glass card then looks like this:

<div class="liquid-glass">
  <h3>Liquid glass</h3>
  <p>Frosted, lit from the top, glossy across the surface.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Put it over a busy, colorful background — a photo, or a few overlapping
radial gradients. Over a flat fill the blur has nothing to sample and the
effect vanishes (see Common mistakes below).

2. Light-mode variant

On a light background, white tint plus white highlights disappear. Flip the
tint toward the background color, lower the saturation boost, and switch the
rim to a mix of white (top) and dark (bottom) so the edge still reads:

.liquid-glass.light {
  color: #111;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.10),
    inset 0 1px 1px rgba(255, 255, 255, 0.90),
    inset 0 -1px 1px rgba(0, 0, 0, 0.06);
}

.liquid-glass.light::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.70) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    transparent 60%
  );
  mix-blend-mode: normal;      /* screen does nothing useful over white */
}
Enter fullscreen mode Exit fullscreen mode

Two rules of thumb for light mode: more blur (12–16px) because light
backgrounds have less contrast to frost, and a higher tint alpha (0.4–0.6)
because the text needs a more opaque surface to stay readable.
If you theme with tokens, drop your brand color into the
color converter to get it as rgb() so you can
append an alpha: rgb(14 165 233 / 0.12) makes a tinted glass in one line.

3. Real refraction with SVG displacement

To make the backdrop actually bend, displace it with an SVG filter.
Procedural noise from feTurbulence drives an feDisplacementMap:

<svg width="0" height="0" aria-hidden="true" style="position:absolute">
  <filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="fractalNoise" baseFrequency="0.008 0.012"
                  numOctaves="2" seed="9" result="noise" />
    <feGaussianBlur in="noise" stdDeviation="1.4" result="soft" />
    <feDisplacementMap in="SourceGraphic" in2="soft" scale="40"
                       xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>
Enter fullscreen mode Exit fullscreen mode 
@supports (backdrop-filter: url('#liquid')) {
  .liquid-glass {
    backdrop-filter: blur(4px) saturate(180%) brightness(1.1) url('#liquid');
  }
}
Enter fullscreen mode Exit fullscreen mode

How it works: feTurbulence produces an RGB noise image. feDisplacementMap
reads the red channel to shift each backdrop pixel horizontally and the
green channel to shift it vertically. A channel value of 0.5 means "no
move", so values above and below push pixels in opposite directions, and
scale sets how far (in user units) a full-strength value can move a pixel.
The feGaussianBlur in between softens the noise so the distortion looks
like water, not static.

Tuning the three numbers

Attribute Low values High values Good range for glass
baseFrequency Large, slow waves (0.002 — a single swell across the card) Fine ripples (0.05+ — looks like frosted texture, not liquid) 0.005–0.015; use two values (x y) for a slightly stretched, less "random" wobble
numOctaves 1 — smooth, blobby 4+ — adds fine detail on top of the big waves, much more expensive 1–2
scale 5–15 — barely visible shimmer 80+ — the backdrop tears into chunks 20–50

Change seed to get a different noise layout with the same character. The
filter region (x="-20%" etc.) is widened on purpose: displacement pulls
pixels in from outside the element, and with the default region the edges
clip to hard lines.

A static alternative: feImage

Noise gives you an organic, random wobble. Apple's real effect is not random:
the distortion is strongest at the edges (like a lens) and flat in the middle.
You get that by replacing the turbulence with a hand-made displacement
map — a PNG or inline SVG where the red/green channels encode the push
direction, grey in the center, ramping toward the edges:

<filter id="lens" x="0" y="0" width="100%" height="100%">
  <feImage href="lens-map.png" preserveAspectRatio="none"
           result="map" />
  <feDisplacementMap in="SourceGraphic" in2="map" scale="32"
                     xChannelSelector="R" yChannelSelector="G" />
</filter>
Enter fullscreen mode Exit fullscreen mode

The map is stretched to the element with preserveAspectRatio="none", so one
image fits any card size. Paint it with a radial gradient from
rgb(128,128,128) in the middle to red/green-shifted corners, or generate it
from a small canvas script. This is the technique the in-depth walkthroughs at
LogRocket
and this Habr article build up to,
and it is much closer to the native look than raw noise.

Browser support

Two separate features matter: backdrop-filter itself, and whether a browser
accepts an SVG filter reference (url(#id)) inside backdrop-filter.

Feature Chrome / Edge Safari Firefox
backdrop-filter (blur, saturate…) 76+ 9+ with -webkit- prefix, 18+ unprefixed 103+
@supports (backdrop-filter: …) yes yes yes
url(#svg-filter) inside backdrop-filter yes no (declaration is dropped) not reliable — treat as no
url(#svg-filter) inside plain filter yes yes yes
prefers-reduced-transparency media query 118+ no behind a flag

The practical consequence: keep -webkit-backdrop-filter for older Safari,
and always gate the SVG refraction behind
@supports (backdrop-filter: url('#id')). Browsers that fail the check keep
the frosted layer, which already looks good. Do not combine the two in one
unguarded declaration — Safari rejects the whole backdrop-filter value if
any part of it is invalid, and you lose the blur too.

Accessibility

  • Contrast is unpredictable. Text over glass sits on whatever scrolls behind it. WCAG's 4.5:1 ratio must hold against the worst part of the backdrop, not the average. Raise the tint alpha, add a subtle text-shadow: 0 1px 2px rgb(0 0 0 / .4), or keep glass for chrome (toolbars, pills) and put long text on solid surfaces.
  • Respect reduced transparency. Users who turn on "Reduce transparency" in macOS or iOS expect opaque panels: 
@media (prefers-reduced-transparency: reduce) {
  .liquid-glass {
    background: rgb(28 30 38 / 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Reduced motion. If you animate the displacement (for instance by animating baseFrequency with an SVG animate element), disable it under prefers-reduced-motion: reduce. A rippling backdrop behind text is a real problem for readers with vestibular disorders.

Performance

backdrop-filter forces the browser to composite everything behind the
element into a texture, blur it, and re-composite every frame something
behind it moves. Three rules keep it smooth:

  1. Keep it off scrolling lists. One glass header over a scrolling page is fine; 50 glass cards inside a scrolling list means 50 blurs per frame. Use glass for the container, not the items.
  2. Blur radius is the cost knob. blur(8px) is cheap; blur(40px) on a full-width panel can drop a mid-range phone below 60fps. Liquid glass wants a small blur (4–10px) anyway — the saturation does the work.
  3. SVG displacement is the expensive layer. feTurbulence with numOctaves="2" recomputed every frame on a large element is noticeably heavier than any CSS filter. Keep displaced elements small (buttons, pills, a single card), keep numOctaves at 1–2, and never animate the noise on more than one element.

will-change: backdrop-filter is rarely useful: the element is already
promoted to its own compositor layer by the filter. Adding will-change:
transform to a glass element that moves (a draggable card, a slide-in
sheet) does help, because it stops the browser re-rasterizing the pane
while it moves.

Common mistakes

  • Flat background. The most frequent "it doesn't work" report. Glass only shows over variation. Test over a photo or stacked radial gradients first.
  • Forgetting isolation: isolate. The sheen uses z-index: -1. Without its own stacking context, the pseudo-element drops behind the parent's background and disappears — or, worse, behind the page.
  • ::after covering the text. If you set z-index: 1 instead, the gloss sits on top of the text and washes it out. Keep the sheen at -1 and the text at auto.
  • Missing position: relative. The inset: 0 on the pseudo-element is relative to the nearest positioned ancestor; without it the sheen stretches over the whole page.
  • overflow: hidden on the glass element. It clips the outer lift shadow. Use border-radius: inherit on children instead.
  • Equal highlights on all sides. Reads as an outline, not a rim. Keep the top highlight the strongest.
  • Blur too strong. Beyond ~16px the backdrop turns into a uniform smear and the material reads as "frosted plastic", not glass.

FAQ

Can I do liquid glass with CSS only, no SVG?

Yes. Tint, blur, saturation, the specular rim and the sheen are all plain
CSS and work in every current browser. You only lose the refraction (the
visible bending of the backdrop), which is the one part that needs an SVG
feDisplacementMap and currently works only in Chromium.

What is the difference between glassmorphism and liquid glass?

Glassmorphism is a translucent tint plus a blur and a thin border. Liquid
glass adds strong saturation, an asymmetric specular rim, a glossy sheen and
edge refraction so the panel looks like a thick lens rather than frosted
film. Compare the glassmorphism card and the
liquid glass card side by side.

Why does my backdrop-filter not work in Safari?

Older Safari needs the -webkit-backdrop-filter prefix (unprefixed support
arrived in Safari 18). Also, if any part of the value is unsupported — such
as url(#filter) — Safari discards the whole declaration, so put the SVG
part inside @supports.

Does liquid glass hurt performance?

A single glass element with a small blur is cheap. The cost scales with the
element's area, the blur radius, and how often what is behind it changes.
Avoid glass on many list items, keep the blur under ~10px, and reserve the
SVG displacement for small controls.

How do I make the glass tinted with my brand color?

Replace the white tint with your color at low alpha, for example
background: rgb(14 165 233 / 0.14), and keep the highlights white. Use the
color converter to get your hex as space-separated
rgb() so you can add the alpha channel.

Try it live

Open the liquid glass card snippet and drag
the blur, saturation, radius and tint controls, then copy the CSS with your
settings. Browse all snippets or subscribe via RSS.

Top comments (1)

Collapse
 
svgicons profile image
Svg/icons •

The reduced-transparency fallback still uses 92% opacity. A fully opaque background would remove that remaining variation behind toolbar icons.