Techniques
Liquid Glass Panel
The foundational surface treatment: a translucent panel with backdrop blur, specular top-edge highlight, and layered shadow — the building block of every card, modal, and container.
.liquid-glass-panel {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 1px rgba(255, 255, 255, 0.08);
}
Cosmic Ambient Ground
The deep-space background with soft pastel orbs that provide environmental color bleeding through glass surfaces.
.cosmic-ground {
background: #050a14;
position: relative;
overflow: hidden;
}
.cosmic-ground::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 600px 400px at 20% 30%, rgba(92, 217, 255, 0.12), transparent),
radial-gradient(ellipse 500px 500px at 70% 60%, rgba(255, 185, 89, 0.08), transparent),
radial-gradient(ellipse 400px 300px at 50% 80%, rgba(160, 224, 192, 0.06), transparent);
pointer-events: none;
}
Specular Highlight Edge
A top-edge radial gradient simulating light catching the crown of a glass surface, adding dimensionality to flat panels.
.specular-highlight {
position: relative;
}
.specular-highlight::after {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0) 70%
);
pointer-events: none;
}