Glass Effect Generator
Generate glassmorphism effects with backdrop-blur, opacity and saturation controls.
#ffffff
Glassmorphism
Glass Card Preview
Adjust controls to customize this glassmorphism effect.
Action
Learn more
Glassmorphism
Classic glass with blur and transparency
Frosted Glass
Heavy blur, white tint, Apple-style
Liquid Glass
Watery translucent distortion feel
Ice Crystal
Cold tinted crystalline edges
Aurora Glass
Color-shifting translucent panel
Smoke Glass
Dark, moody translucent panel
CSS
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 16px;Tailwind CSS
<div class="bg-[rgba(255,255,255,0.15)] backdrop-blur-[12px] backdrop-saturate-[180%] border border-[rgba(255,255,255,0.20)] rounded-[16px]">
...
</div>Explore more Goodies
Other free tools from Eguth Studio you might enjoy.