Stacked Glass
Three glass layers stacked at offset depths — each pane blurs the panes behind it, creating a dimensional sandwich effect.
The code
<div class="gm-stack-bg">
<div class="gm-stack__pane gm-stack__pane--3"></div>
<div class="gm-stack__pane gm-stack__pane--2"></div>
<div class="gm-stack__pane gm-stack__pane--1">
<h4>Layered depth</h4>
<p>Each pane blurs the surfaces beneath it.</p>
</div>
</div> <div class="gm-stack-bg">
<div class="gm-stack__pane gm-stack__pane--3"></div>
<div class="gm-stack__pane gm-stack__pane--2"></div>
<div class="gm-stack__pane gm-stack__pane--1">
<h4>Layered depth</h4>
<p>Each pane blurs the surfaces beneath it.</p>
</div>
</div>.gm-stack-bg {
position: relative; padding: 28px;
border-radius: 18px; overflow: hidden;
min-height: 200px;
background:
radial-gradient(circle at 25% 30%, #f59e0b 0%, transparent 45%),
radial-gradient(circle at 75% 70%, #06b6d4 0%, transparent 45%),
radial-gradient(circle at 50% 90%, #ec4899 0%, transparent 45%),
#1a0a1a;
}
.gm-stack__pane {
position: absolute;
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
color: #fff;
}
.gm-stack__pane--3 {
top: 18px; right: 18px;
width: 140px; height: 100px;
background: rgba(255, 255, 255, 0.05);
}
.gm-stack__pane--2 {
top: 42px; right: 50px;
width: 160px; height: 110px;
background: rgba(255, 255, 255, 0.07);
}
.gm-stack__pane--1 {
top: 70px; left: 28px;
width: 200px; padding: 14px 18px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.gm-stack__pane--1 h4 { margin: 0 0 4px; font: 700 13px system-ui, sans-serif; }
.gm-stack__pane--1 p { margin: 0; font: 11px/1.5 system-ui, sans-serif; opacity: 0.78; } .gm-stack-bg {
position: relative; padding: 28px;
border-radius: 18px; overflow: hidden;
min-height: 200px;
background:
radial-gradient(circle at 25% 30%, #f59e0b 0%, transparent 45%),
radial-gradient(circle at 75% 70%, #06b6d4 0%, transparent 45%),
radial-gradient(circle at 50% 90%, #ec4899 0%, transparent 45%),
#1a0a1a;
}
.gm-stack__pane {
position: absolute;
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
color: #fff;
}
.gm-stack__pane--3 {
top: 18px; right: 18px;
width: 140px; height: 100px;
background: rgba(255, 255, 255, 0.05);
}
.gm-stack__pane--2 {
top: 42px; right: 50px;
width: 160px; height: 110px;
background: rgba(255, 255, 255, 0.07);
}
.gm-stack__pane--1 {
top: 70px; left: 28px;
width: 200px; padding: 14px 18px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.gm-stack__pane--1 h4 { margin: 0 0 4px; font: 700 13px system-ui, sans-serif; }
.gm-stack__pane--1 p { margin: 0; font: 11px/1.5 system-ui, sans-serif; opacity: 0.78; }