Frosted Modal — Playground

{CF} CodeFronts Back to CSS Glassmorphism Frosted Modal Pure CSS

Edit any tab — preview updates live

.gm-modal-bg {
  position: relative; padding: 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, #f97316 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, #ef4444 0%, transparent 45%),
    #1a0a0a;
}
.gm-modal {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.gm-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.gm-modal__head h3 { margin: 0; font: 700 14px system-ui, sans-serif; }
.gm-modal__close {
  background: none; border: none; color: rgba(255, 255, 255, 0.6);
  font: 600 22px system-ui; line-height: 1; cursor: pointer; padding: 0;
}
.gm-modal__close:hover { color: #fff; }
.gm-modal__body { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }
.gm-modal__row { display: flex; gap: 8px; justify-content: flex-end; }
.gm-modal__btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 7px 14px; border-radius: 7px;
  font: 600 11px system-ui, sans-serif; cursor: pointer;
}
.gm-modal__btn:hover { background: rgba(255, 255, 255, 0.2); }
.gm-modal__btn--danger {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
}
.gm-modal__btn--danger:hover { background: rgba(239, 68, 68, 0.5); }

Live preview Ready