When we pivoted this portfolio to the Luxury Light & Airy theme, we wanted it to feel like holding a piece of frosted glass against a bright sky.
Perfecting Glassmorphism
Glassmorphism isn't just about backdrop-filter: blur. The secret lies in the edges. A flat blur looks cheap; a properly bordered blur looks like physical glass.
We globally applied a dynamic border system to every card:
.glass-card {
@apply bg-surface-elevated/40 backdrop-blur-xl border border-black/5 dark:border-white/10 shadow-2xl;
}By using a tiny fraction of black (border-black/5) in light mode, the edge subtly refracts the ambient background colors without looking like a harsh outline.
The Ambient Mesh
To give the glass something interesting to refract, we built a React Three Fiber component (<AmbientMesh>) that renders slowly shifting gradients behind the main layout.
Because we use OKLCH color spaces, the mesh can fluidly transition between warm creams and soft golds without passing through the "muddy" gray zones that RGB interpolation suffers from.
The combination of smooth scrolling, mathematical color spaces, and physical glass emulation culminates in the Awwwards-grade experience you see today.