Glassmorphism CSS Generator
Design ToolsFrosted glass card effect in CSS
Embed this tool on your websiteFree
- Choose how tall the frame should be.
- Press Copy code.
- Paste it into your page, blog, WordPress or Notion HTML block.
The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.
Similar tools you may like
History
All history →Glassmorphism CSS Generator — at a glance
Get the modern frosted-glass look for cards and menus without guessing the CSS.
How to use it — step by step
Set blur, opacity, color and corner radius — the preview updates when you run it.
Enter your values
Fill in the boxes. Sensible example values are already filled in for you.
Generate Glass CSS
Press the button. The answer is worked out instantly on your device.
Read or copy the result
See the big answer and the extra details, then press Copy to keep them.
Pro tips
Small things that make the result better.
Quick facts
Frequently Asked Questions
Why can’t I see the blur on my page?+
The element needs something colorful behind it. A plain white background shows no blur.
Is backdrop-filter supported everywhere?+
It works in all modern browsers. Very old browsers will show the transparent color without blur.
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.