Frosted Glass Alerts
Alerts with a blurred, translucent backdrop that reveals content behind. Use over images or hero sections where a glassy notice fits the design.
Alerts with a blurred, translucent backdrop that reveals content behind. Use over images or hero sections where a glassy notice fits the design.
Search blocks by description or jump to a page.
Frosted Glass Alerts renders five stacked alert variants inside a padded column. Each alert carries a translucent, blurred background that lets content behind it show through, a semi-transparent border, a subtle shadow, and a status icon paired with a bold title and a short description line. The five variants cover the full tone range: neutral default, error, success, warning, and info, each tinted by its semantic color.
The title and description text are independent in every alert, so you can replace either without affecting the others. You can also remove individual variants your product does not need or add more by duplicating any entry. The icon, tint color, and border color are the only coupled parts: swapping the icon and the color together keeps the visual logic intact.
Reach for this block when alerts must sit over a rich background rather than a flat page. It fits well in a developer tools product where a dashboard hero, a code editor panel, or a terminal surface already sits behind the notices, and a solid panel would block too much of that context. Compared to elevated alerts that float with a shadow, the frosted treatment keeps the alert visually attached to the surface beneath it rather than lifting away from it.
A natural flow around it on a Components page:
Before
After
All five semantic tones are present, so you can drop in real copy for any combination. A few concrete fits for a developer tools context:
Tip: this block works best when the page behind the alerts has visible texture or imagery; on a plain white background the blur effect is not visible and a basic alert will look identical.