Story

There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks.

Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on!

Layers include: * Adjustable blur, brightness, and saturation (backdrop-filter) * Subtle translucent texture * Faux 3D bevel (using box-shadows, not an outline)

Glassmorphism is rather heavy on resources, so it’s best used as an accent and avoided on wide desktop elements. Should be compatible with recent versions of Chrome, Safari, and Firefox (desktop and mobile). If you spot bugs or rendering glitches, I’d love to know!

Side note: this is an early preview of a framework-agnostic glass SCSS/component library I’m building.