console
window.onload = () => {
const container = document.querySelector('.glass-container')
document.onmousemove = (e) => {
container.style.left = e.x - 100 + 'px'
container.style.top = e.y - 100 + 'px'
}
}
<img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.f2JiCFgzaYZ7tKTIbZuBKgHaHa?rs=1&pid=ImgDetMain">
<div class="glass-container">
<div class="glass-filter"></div>
<div class="glass-specular"></div>
</div>
<svg style="display: none">
<filter height="100%" id="lg-dist" width="100%" x="0%" y="0%">
<feTurbulence baseFrequency="0.008 0.008"
numOctaves="2" result="noise" seed="92" type="fractalNoise"/>
<feGaussianBlur in="noise" result="blurred" stdDeviation="2"/>
<feDisplacementMap in="SourceGraphic"
in2="blurred" scale="70" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
<svg style="display: none">
<filter
id="glass-distortion"
x="0%"
y="0%"
width="100%"
height="100%"
filterUnits="objectBoundingBox"
>
<feTurbulence
type="fractalNoise"
baseFrequency="0.008 0.008"
numOctaves="1"
seed="2"
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>
.glass-container {
position: fixed;
overflow: hidden;
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 200px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.25);
}
.glass-filter {
position: absolute;
inset: 0;
z-index: 0;
backdrop-filter: blur(4px);
filter: url(#glass-distortion);
isolation: isolate;
}
.glass-specular {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
overflow: hidden;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75),
inset 0 0 5px rgba(255, 255, 255, 0.75);
}