Liquid Glass

One of the hottest design trends in 2025 is the Liquid Glass effect

Apple introduced this look in their latest iPhone and iOS designs, and now you’re seeing it everywhere: apps, UI kits, hero sections – that glossy, blurred, slightly distorted glass that feels ultra-premium.

Many Elementor web creators wonder “how to include this cool effect in my designs?!“

So here is how to include it in your CTAs, headers, and other components – no plugins, just clean CSS, SVG filters, and a touch of JavaScript to track the mouse and create that signature glow (optional).

Core

Put this snippet in your page, or under Elementor > Custom Code.

<style>
/*Core Liquid Glass*/
.liquid-glass {
  backdrop-filter: url(#liquidGlass) blur(5px);
  -webkit-backdrop-filter: url(#liquidGlass) blur(5px);
    box-shadow: 0 30px 30px rgba(0,0,0,0.1), inset 0 0 20px rgba(0,0,0,0.1), inset 3px 3px 2px -2px rgba(255,255,255,0.8), inset -3px -3px 2px -2px rgba(255,255,255,0.8)!important;
}
</style>

<!-- Liquid Glass Filter -->
<svg width="0" height="0">
  <defs>
    <filter id="liquidGlass">
      <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="10" result="turbulence" />
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="100" xChannelSelector="R" yChannelSelector="G" />
    </filter>
  </defs>
</svg>

Now all you have to do is to add to add to your Elements a CSS Class “liquid-glass” under the Advanced Tab

That’s all!

You can give the selected container a background color with opacity, and border radius as you wish, everything else will work like a charm.

Bonus: Add a cool mouse tracking glow

To achieve this mouse tracking effect, we will use a pseudo ‘after‘ element for the liquid glass containers + Javascript to update its position + add an overflow: hidden property to the parent, to keep the glow inside the container.

Everything else stays exactly the same.

Complete code with the mouse glow:

<!-- Liquid Glass Saglix start-->
<style>
/*Core Liquid Glass*/
.liquid-glass {
  backdrop-filter: url(#liquidGlass) blur(5px);
  -webkit-backdrop-filter: url(#liquidGlass) blur(5px);
    box-shadow: 0 30px 30px rgba(0,0,0,0.1), inset 0 0 20px rgba(0,0,0,0.1), inset 3px 3px 2px -2px rgba(255,255,255,0.8), inset -3px -3px 2px -2px rgba(255,255,255,0.8)!important;
    overflow: hidden;
}

/*Light Mouse*/
.liquid-glass::before {
  content: '';
  position: absolute;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(5vw);
  pointer-events: none;
  transform: translate(-50%, -50%);
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  opacity: 0;
  transition: opacity 0.3s ease, top 0.05s ease, left 0.05s ease;
  z-index: 0;
}
.liquid-glass:hover::before {
  opacity: 1;
}
</style>

<!-- Liquid Glass Filter -->
<svg width="0" height="0">
  <defs>
    <filter id="liquidGlass">
      <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="10" result="turbulence" />
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="100" xChannelSelector="R" yChannelSelector="G" />
    </filter>
  </defs>
</svg>

<!-- JS: Mouse-Tracking Light -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  const glass = document.querySelector('.liquid-glass');

  glass.addEventListener('mousemove', function (e) {
    const rect = glass.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    glass.style.setProperty('--mouse-x', `${x}px`);
    glass.style.setProperty('--mouse-y', `${y}px`);
  });

});

</script>
<!-- Liquid Glass Saglix end-->