What makes the glass effect work?

A semi-transparent background combined with backdrop-filter: blur() and a subtle border — this tool lets you tune all three visually.

Does backdrop-filter work everywhere?

It has strong support in modern browsers but may need a -webkit- prefix for older Safari versions, which this tool includes automatically.

Yes — free, no sign-up, and everything runs in your browser.

Free Tool

Design a frosted-glass card effect — copy or download the CSS.

Background opacity20%

Blur12px

Border opacity30%

Corner radius16px