The frosted-glass look: a translucent panel with a blurred background showing through. backdrop-filter: blur() does the work.
Design Atlas<div class="blob a"></div><div class="blob b"></div><div class="blob c"></div>
<div class="card"><small>BALANCE</small><strong>₩ 1,240,000</strong><span>•••• 4821</span></div>body{background:#1b1433}
.blob{position:absolute;border-radius:50%;filter:blur(2px);animation:drift 9s ease-in-out infinite alternate}
.a{width:180px;height:180px;background:#ff5c8a;left:18%;top:14%}
.b{width:220px;height:220px;background:#5b5bf7;right:14%;bottom:8%;animation-delay:-3s}
.c{width:120px;height:120px;background:#18c29c;left:52%;top:8%;animation-delay:-6s}
@keyframes drift{to{transform:translate(30px,-24px) scale(1.12)}}
.card{position:relative;width:min(300px,80%);padding:22px 24px;border-radius:20px;color:#fff;display:grid;gap:6px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
box-shadow:0 20px 40px rgba(0,0,0,.25)}
.card small{opacity:.7;letter-spacing:.12em;font-size:11px}
.card strong{font-size:28px}
.card span{opacity:.8;font-family:monospace}Popularised around 2020 by macOS Big Sur and Windows 11 (Acrylic/Mica). The element’s own background is translucent, content behind it is blurred with backdrop-filter, and a 1px light border suggests the glass edge.
It needs a colourful background to read. On a flat colour it just becomes a grey box.
For modals, sidebars and top bars where you want to show layering. Check text contrast (4.5:1).