반투명한 판 뒤로 배경이 뿌옇게 비치는 "간유리" 스타일. backdrop-filter: blur()가 핵심입니다.
디자인 아틀라스<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}2020년 무렵 macOS Big Sur와 Windows 11(Acrylic/Mica)이 대중화한 스타일입니다. 요소 자체의 배경은 반투명하게, 그 뒤의 콘텐츠는 backdrop-filter로 흐리게 만들고, 1px 밝은 테두리로 유리의 모서리를 표현합니다.
뒤에 색이 풍부한 배경이 있어야 효과가 보입니다. 단색 배경 위에서는 그냥 회색 박스가 됩니다.
모달, 사이드바, 상단 바처럼 레이어 위계를 보여줘야 할 때. 텍스트 대비(4.5:1)를 꼭 확인하세요.