Refraction Card — Playground

{CF} CodeFronts Back to CSS Glassmorphism Refraction Card Pure CSS

Edit any tab — preview updates live

.gm-refr-bg {
  position: relative; padding: 32px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, #f43f5e 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, #8b5cf6 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #06b6d4 0%, transparent 60%),
    #0e0a1a;
}
.gm-refr {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-radius: 14px;
  padding: 18px 22px;
  color: #fff;
  /* Refractive rim — gradient border via background-clip */
  border: 1.5px solid transparent;
  background-clip: padding-box;
}
.gm-refr::before {
  content: ''; position: absolute; inset: -1.5px;
  border-radius: 15.5px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.1) 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.3));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  pointer-events: none;
}
.gm-refr h4 { margin: 0 0 6px; font: 700 14px/1.2 system-ui, sans-serif; }
.gm-refr p  { margin: 0; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }

Live preview Ready