Create beautiful frosted-glass card effects in seconds. Adjust the tint, blur and transparency, preview the result live, then copy the CSS — free, with no sign-up.
Glass Card
This is how your frosted-glass card looks.
Get startedTip: keep text white or very light on glass cards so it stays readable over any background.
How to Use
- Pick a tint colour and a background to preview against.
- Drag the Opacity, Blur, Border radius and Saturation sliders.
- Watch the frosted-glass card update live.
- Click Copy CSS and paste the code into your stylesheet.
Key Features
- Live glassmorphism preview on three colourful backgrounds.
- Controls for tint, opacity, blur, radius and saturation.
- Clean CSS output with the -webkit- prefix included.
- One-click copy button.
- Private — everything runs in your browser.
FAQs
What is glassmorphism?
It is a design trend where cards look like frosted glass — translucent, blurred backgrounds with subtle borders — popularised by modern operating systems.
Do all browsers support backdrop-filter?
All modern browsers support it. Older browsers ignore the blur and show a plain translucent card, which still looks fine.
Does glassmorphism work on any background?
It looks best over colourful or detailed backgrounds where the blur is visible. Over a plain white background the effect is barely noticeable.
Will it slow down my website?
Backdrop blur is GPU-accelerated, but heavy use on large areas can cost performance on low-end devices. Use it for cards and panels, not full-page overlays.
Related Tools
CSS 3D Transform Generator · CSS Clip Path Generator · CSS Scrollbar Generator · CSS Gradient Generator · CSS Box Shadow Generator