Realistic Liquid Glass Distortion Effects with CSS and SVG

Yet another liquid glass effect implemented with CSS and SVG.

It transforms HTML elements into realistic glass surfaces with physical distortion and refraction effects.

This effect is built to replicate the fluid, refractive glass aesthetic seen in Apple’s iOS 26 and macOS 26 design language.

Features:

• Pure CSS and SVG implementation (no JavaScript required)
• Realistic distortion using SVG turbulence and displacement mapping
• Backdrop blur with configurable intensity
• Specular lighting simulation for authentic glass reflections
• Customizable tint and shine overlays
• Hardware-accelerated rendering via CSS filters

See it in action:

How to use it:

1. Set up the HTML Structure. You need a wrapper element containing four distinct layers. The content you want to be visible goes inside the .liquidGlass-text div.

<div class="liquidGlass-wrapper">
  <div class="liquidGlass-effect"></div>
  <div class="liquidGlass-tint"></div>
  <div class="liquidGlass-shine"></div>
  <div class="liquidGlass-text">
    Any Content Here
  </div>
</div>

2. Add the distortion filter to your document.

<svg style="display: none">
  <filter
    id="glass-distortion"
    x="0%"
    y="0%"
    width="100%"
    height="100%"
    filterUnits="objectBoundingBox"
  >
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.01 0.01"
      numOctaves="1"
      seed="5"
      result="turbulence"
    />
    <feComponentTransfer in="turbulence" result="mapped">
      <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
      <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
      <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
    </feComponentTransfer>
    <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
    <feSpecularLighting
      in="softMap"
      surfaceScale="5"
      specularConstant="1"
      specularExponent="100"
      lighting-color="white"
      result="specLight"
    >
      <fePointLight x="-200" y="-200" z="300" />
    </feSpecularLighting>
    <feComposite
      in="specLight"
      operator="arithmetic"
      k1="0"
      k2="1"
      k3="1"
      k4="0"
      result="litImage"
    />
    <feDisplacementMap
      in="SourceGraphic"
      in2="softMap"
      scale="150"
      xChannelSelector="R"
      yChannelSelector="G"
    />
  </filter>
</svg>

3. Add the CSS to style the layers and apply the SVG filter.

.liquidGlass-wrapper {
  position: relative;
  display: flex;
  font-weight: 600;
  overflow: hidden;
  color: black;
  cursor: pointer;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(3px);
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
}

.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
}

.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
  inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
}

.liquidGlass-text {
  z-index: 3;
  font-size: 2rem;
  color: black;
}

FAQs:

How do I change the distortion pattern?
To get a different random pattern, change the seed attribute in the <feTurbulence> tag. It accepts any integer, and each one will generate a unique noise map. I suggest 14 and 17 as good starting points.

Why does the effect look slightly different across browsers?
Browser rendering engines can interpret SVG filters with minor variations. While the core displacement effect is consistent, you might notice subtle differences in the lighting or turbulence rendering between Chrome, Firefox, and Safari.

Q: How do I customize the glass color?
A: Modify the background value in .liquidGlass-tint to change the base glass color. For colored glass effects, experiment with different RGBA values while maintaining appropriate alpha transparency for the glass illusion.

The post Realistic Liquid Glass Distortion Effects with CSS and SVG appeared first on CSS Script.