GLASS / SURFACE
Blur 24px · edge light
Back to library
INTERACTION_029
Modal Entry.
The overlay fades and blurs the page while the dialog enters from scale 0.98 and 8px below, giving weight without bounce.
- CATEGORY
- App UI
- COMPLEXITY
- Easy
- TECH
- CSS
- PLATFORM
- Both
- PERFORMANCE
- Medium
LIVE PLAYGROUND
CSS / CSS
.overlay {
background: rgba(5, 5, 5, 0.6);
backdrop-filter: blur(8px);
animation: fade 250ms ease both;
}
.dialog {
animation: pop 350ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
}