Glassmorphism - a translucent, blurred panel with a thin light border and a soft shadow - depends on backdrop-filter, a property that's easy to get visually wrong by hand since opacity, blur, and border all interact.

Six sliders and a color picker (opacity, blur radius, tint color, border opacity, corner radius, shadow intensity) drive a live preview against three sample backgrounds, and generate the matching CSS block to copy directly into a stylesheet.

When you'd use this

Designing a frosted card, navbar, or modal overlay and wanting to see how the translucency actually reads before committing values to CSS - the mesh, sunset, and neon preview backgrounds exist because a glass effect looks completely different depending on what's behind it, which is hard to judge by staring at hex values.

Things to watch for

backdrop-filter only has something to do if there's content behind the panel worth blurring - placed over a flat, single-color background, a glass panel just looks like a semi-transparent box with no blur effect visible.

The generated CSS includes both backdrop-filter and its -webkit- prefixed form, since Safari and some older Chromium builds only recognize the prefixed version. Browsers without backdrop-filter support at all will simply ignore the property and render a flat translucent panel with no blur - check your target browser support before shipping this widely.

Frequently asked questions