Liquid Glass effect | אפקט זכוכית נוזלית

				
					<!-- 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-->