Refraction Card
Glass card with a fake refraction edge — a brighter rim on one side simulates how real glass bends light at its boundary.
The code
<div class="gm-refr-bg">
<div class="gm-refr">
<h4>Optical illusion</h4>
<p>
An inset linear-gradient on the border channel mimics how light bends at the edge of real
glass.
</p>
</div>
</div> <div class="gm-refr-bg">
<div class="gm-refr">
<h4>Optical illusion</h4>
<p>
An inset linear-gradient on the border channel mimics how light bends at the edge of real
glass.
</p>
</div>
</div>.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; } .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; }More from 12 CSS Glassmorphism Designs
Glass SearchTinted GlassStacked GlassGlass CardFrosted ModalPricing GlassGlass NavbarGlass Tab BarGlass SidebarGlass InputGlass Toggle
View the full collection →