The frosted-glass look (iOS control centre, every modern dashboard) is one property plus supporting details.
The recipe
.glass {
background: rgba(255, 255, 255, 0.08); /* the tint */
backdrop-filter: blur(16px) saturate(160%); /* the magic */
-webkit-backdrop-filter: blur(16px) saturate(160%); /* Safari */
border: 1px solid rgba(255, 255, 255, 0.15); /* the edge highlight */
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}Why each line matters
- backdrop-filter blurs what's BEHIND the element (filter blurs the element itself — common mix-up)
- The subtle border sells the "glass edge" — skip it and the effect looks muddy
- saturate(160%) makes background colors pop through the frost
- Needs something interesting behind it — put a gradient or image under the glass
Where it works
Sticky navbars (this site's header is exactly this), modals, cards over hero images. Keep text contrast readable over unpredictable backgrounds — add a darker tint when in doubt. Fallback: solid rgba background for the 3% of old browsers via @supports.