A backdrop blur alert modal built with pure HTML and CSS that emphasizes important messages by softening the background with a blur effect, helping critical alerts stand out without relying on JavaScript or external libraries.
Usage
This component is best suited for attention-critical notifications, such as warnings, confirmations, or system messages where the surrounding interface should remain visible but visually de-emphasized to draw focus to the alert content.
Implementation
The blur effect is achieved using CSS backdrop-filter, semi-transparent overlays, and layered positioning, allowing the modal to appear above the interface while subtly diffusing the background elements behind it.
HTML
<div class="modal-blur">
<div class="modal-blur__panel">
<h4>Attention</h4>
<p>Please review changes.</p>
<button>Okay</button>
</div>
</div>CSS
.modal-blur {
width: 200px;
padding: 0.75rem;
border-radius: 16px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.7);
display: grid;
place-items: center;
}
.modal-blur__panel {
width: 100%;
padding: 0.75rem;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
text-align: center;
animation: pop 220ms ease-out;
}
.modal-blur__panel h4 {
font-size: 14px;
margin-bottom: 0.25rem;
color: #111827;
}
.modal-blur__panel p {
font-size: 12px;
color: #4b5563;
margin-bottom: 0.5rem;
}
.modal-blur__panel button {
padding: 0.4rem 0.75rem;
border-radius: 999px;
border: none;
background: #6366f1;
color: #ffffff;
font-size: 12px;
cursor: pointer;
transition: transform 150ms ease, background 150ms ease;
}
.modal-blur__panel button:hover {
transform: translateY(-1px);
background: #4f46e5;
}
@keyframes pop {
from {
transform: scale(0.96);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@media (prefers-color-scheme: dark) {
.modal-blur {
background: rgba(17, 24, 39, 0.75);
}
.modal-blur__panel {
background: #0f172a;
color: #e5e7eb;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.modal-blur__panel h4 {
color: #f9fafb;
}
.modal-blur__panel p {
color: #cbd5f5;
}
.modal-blur__panel button {
background: #4f46e5;
}
.modal-blur__panel button:hover {
background: #4338ca;
transform: translateY(-1px);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses background blur to emphasize alerts
- Keeps layout context visible behind the modal
- Reduces visual distraction while highlighting messages
- Works in modern browsers
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.