Skip to content

Instantly share code, notes, and snippets.

@kobitoDevelopment
Last active June 10, 2025 12:12
Show Gist options
  • Save kobitoDevelopment/da948f6499b832b78f2438dee89e54b1 to your computer and use it in GitHub Desktop.
Save kobitoDevelopment/da948f6499b832b78f2438dee89e54b1 to your computer and use it in GitHub Desktop.
.liquidGlass-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 120px;
border-radius: calc(1px * infinity);
overflow: hidden;
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
}
.liquidGlass-effect {
position: absolute;
z-index: 0;
inset: 0;
backdrop-filter: url(#glass-distortion) blur(8px);
overflow: hidden;
border-radius: inherit;
}
.liquidGlass-tint {
z-index: 1;
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.25);
border-radius: inherit;
}
.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);
border-radius: inherit;
}
.wrapper {
background-image: url("../../images/1.jpg");
background-size: cover;
height: 200vh;
}
<div class="wrapper">
<div class="liquidGlass-wrapper">
<div class="liquidGlass-effect"></div>
<div class="liquidGlass-tint"></div>
<div class="liquidGlass-shine"></div>
</div>
<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" />
<!-- Seeds: 14, 17, -->
<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="16" 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>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment