CSS
Full-Screen Overlay with Blurred Background and Flexbox Centered Content
Create an immersive full-screen overlay for modals or alerts, featuring a blurred background effect using `backdrop-filter` and perfectly centering its content within the viewport using Flexbox for optimal user experience.
.overlay-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
backdrop-filter: blur(5px); /* Blurs content behind the overlay */
display: flex; /* Enable Flexbox for centering */
justify-content: center; /* Horizontally center content */
align-items: center; /* Vertically center content */
z-index: 1000; /* Ensure it's on top */
visibility: hidden; /* Hidden by default */
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.overlay-backdrop.active {
visibility: visible;
opacity: 1;
}
.overlay-content {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
max-width: 500px;
text-align: center;
transform: scale(0.9);
transition: transform 0.3s ease;
}
.overlay-backdrop.active .overlay-content {
transform: scale(1);
}
How it works: This snippet creates a full-screen overlay. The `.overlay-backdrop` is `position: fixed` to cover the entire viewport. `backdrop-filter: blur(5px);` provides a modern frosted glass effect, blurring elements behind it. Flexbox (`display: flex; justify-content: center; align-items: center;`) is then used to perfectly center the `.overlay-content` within the backdrop, ensuring the modal or alert is always perfectly positioned regardless of screen size. The overlay can be toggled visible/hidden by adding/removing the `active` class, typically via JavaScript.