Stacked Glass — Playground

{CF} CodeFronts Back to CSS Glassmorphism Stacked Glass Pure CSS

Edit any tab — preview updates live

.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; }

Live preview Ready