Glass Effect
Premium & Modern
Glassmorphism uses backdrop-filter blur to create a frosted glass effect. Adjust the settings to see how it reacts to the background.
CSS
/* CSS */
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(110%);
-webkit-backdrop-filter: blur(12px) saturate(110%);
border: 1px solid rgba(255, 255, 255, 0.2);
}Tailwind (Approx)
<!-- Tailwind -->
<div class="bg-[rgba(255,255,255,0.15)] backdrop-blur-[12px] backdrop-saturate-[110%] border-[1px] border-[rgba(255,255,255,0.2)]">
</div>Adjustments
12px
0.15
110%
1px
#ffffff
Pro Tip
For the best glassmorphism effect, ensure your background is colorful and distinct. The blur effect needs details behind it to be visible.