CSS Glassmorphism Generator
Generate a frosted-glass CSS card style - background blur, transparency, and border - with a live preview.
Adjust blur, transparency, and border - the preview card updates live over a background image, and the CSS is ready to copy.
backdrop-filter support and rendering performance vary somewhat across browsers - test in your actual target browsers.
This effect relies on backdrop-filter, which needs actual content or an image behind the element to have a visible blurring effect.
What Is Glassmorphism?
Glassmorphism is a design style using semi-transparent backgrounds with a blur effect (via CSS backdrop-filter) to create a frosted-glass look, typically combined with a subtle light border and soft shadow.
Why Use This Tool?
The effect only looks right with a specific balance of blur, background opacity, and border - too much of any one and it stops reading as "glass". A live preview over an actual background makes that balance easy to find.
How to Use It
- Adjust background opacity and backdrop blur amount.
- Set a subtle border color/width.
- Copy the generated CSS.
Limitations
backdrop-filter support and performance vary somewhat by browser - test the effect in your actual target browsers, and note that it only has a visible effect when there's content behind the element to blur.