Liquid Glass Effect

This snippet recreates the sophisticated “liquid glass” aesthetic often seen in high-end operating system interfaces like macOS. Unlike standard glassmorphism which just blurs the background, this effect adds a realistic, fluid distortion to the glass surface. This is achieved purely through CSS and SVG filters, making it lightweight and performant compared to WebGL alternatives.

Core Technique

The visual magic happens by combining CSS backdrop-filter with a custom SVG filter referenced via the filter property.

1. SVG Filter Chain: The invisible SVG defines two filters.
   • #container-glass: Uses feTurbulence to generate fractal noise, which is then smoothed by feGaussianBlur. This noise map is fed into feDisplacementMap, which distorts the pixels of the element based on the noise values, creating the “rippled” liquid look.
   • #btn-glass: Uses a Base64-encoded image map (feImage) as the displacement source, creating a more structured, lens-like distortion for the button.
2. CSS Application: The .glassContainer::after pseudo-element applies filter: url(#container-glass). Crucially, backdrop-filter: blur(0px) is used not for blurring, but to trigger a new stacking context that allows the SVG filter to access and distort the background content beneath it.

Customization

You can tweak the intensity and texture of the glass effect by modifying the SVG filter primitives.

<filter id="container-glass">
  <!-- 
    Adjust baseFrequency to change ripple size (smaller = larger ripples) 
  -->
  <feTurbulence baseFrequency="0.008 0.008" />
  
  <!-- 
    Adjust scale to change distortion intensity 
  -->
  <feDisplacementMap scale="77" />
</filter>

In CSS, you can adjust the lighting and borders:

.glassContainer::before {
  /* Inner light/shadow for bevel effect */
  box-shadow: inset 2px 2px 0px -2px rgba(255, 255, 255, 0.7), ...;
}

Tips

1. Performance Consideration: SVG filters, especially feDisplacementMap, can be CPU-intensive on large areas. This effect is best used on smaller UI components like cards, modals, or buttons rather than full-screen overlays to maintain 60fps scrolling.

2. Firefox Fallback Strategy: Since Firefox does not currently support applying SVG displacement maps to the backdrop-filter layer, the effect degrades gracefully to a static glass look. No extra code is needed for this fallback; it simply looks like a clean glass panel without the ripple distortion. If the “liquid” part is critical for branding, consider using a WebGL (Canvas) solution instead of CSS/SVG.