CSS generator for a high-def glass effect

Show HN: CSS generator for a high-def glass effect

Operating in show hn launch, CSS generator for a high-def glass effect operates.

Profile

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

Its activity falls under show hn launch; the profile below is assembled from public directory data.

Directory data places it at the Show HN launch stage.

Website: glass3d.dev