Techniques
Frosted glass panel
The core recipe — a translucent white fill with heavy backdrop-blur, a hairline light border, and a top-edge inner highlight that makes the surface catch light like real glass.
.glass-panel {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
box-shadow: 0 16px 40px rgba(20, 8, 50, 0.34),
inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
Saturated gradient blob field
The colorful ground the glass blurs — a deep violet page painted with the canonical violet→magenta→peach gradient plus drifting radial blobs of vivid blue and magenta.
.gradient-ground {
background-color: #3A1C71;
background-image:
radial-gradient(40% 50% at 20% 25%, rgba(44, 168, 255, 0.55) 0%, transparent 70%),
radial-gradient(45% 55% at 80% 70%, rgba(215, 109, 119, 0.55) 0%, transparent 70%),
linear-gradient(135deg, #5B2A86 0%, #D76D77 55%, #FFAF7B 100%);
min-height: 100vh;
}
Light-edge highlight border
A gradient border that brightens along the top-left edge, simulating light grazing the rim of a glass panel.
.glass-edge {
position: relative;
border-radius: 24px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
}
.glass-edge::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.1) 45%,
rgba(255, 255, 255, 0.25) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}