Most glassmorphism on the web feels sluggish for one reason: people blur the whole
page. backdrop-filter over a moving backdrop has to re-rasterize every frame.
Put the same effect over a static one and the browser caches the result. That one
detail decides whether you get a smooth 60fps or a scroll that stutters.
Reserve glass for accent surfaces
On this site, glass appears on exactly four things: the nav, the theme toggle, the contact panel, and our signature "Manifest Card." Everything else is near-solid fill with a 1px hairline. The page reads as glass because those four moments are deliberate. We didn't frost every box.
A recipe that holds up
.glass {
background: var(--glass-bg); /* translucent tint */
border: 1px solid var(--glass-border);
backdrop-filter: blur(20px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), /* the specular edge */
0 16px 40px -12px rgba(0,0,0,0.55);
}
Two details sell it. The inset top highlight is the specular edge real glass has, and a faint noise overlay kills the banding that blur introduces.
Never let contrast depend on blur
Some browsers and some user settings disable backdrop-filter outright. Always ship a
solid-background fallback via @supports, and respect
prefers-reduced-transparency. Sort out accessibility first, then worry about the effect.
Good glass should feel like craft. Use it in one place, render it over something that doesn't move, and it'll look expensive while still running fast.