Frosted glass effect with backdrop-filter. Card and overlay styling.
/* Frosted glass card */
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Dark glass */
.glass-dark {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}Use a translucent background and backdrop-filter: blur(). -webkit-backdrop-filter for Safari.
Works best over an image or busy background. Add a subtle border for definition.
backdrop-filter: blur(10px); background: rgba(255,255,255,0.1);