Glass controls
Background behind glass
Live preview
Frosted glass
Glassmorphism Card
Backdrop blur and transparency create this frosted-glass effect over any background.
Generated CSS
Frequently asked questions
Will backdrop-filter work in all browsers?
It works in all modern browsers including Chrome, Edge, Safari and Firefox (Firefox enabled it by default in 2023). The generated code includes the -webkit- prefix for Safari.
Why does the preview look different on my site?
The frosted effect depends on what sits behind the card. Our preview uses colorful gradients; on your page the same blur will soften whatever content is underneath.
Can I tint the glass a color?
Yes. The Glass tint picker changes the card's base color while keeping the transparency you set, so you can make colored frosted glass.
Preview
Related free tools
Free CSS Button Generator | Style Buttons Online
Free CSS button generator. Customize colors, padding, and radius with live preview, then c
Free HEX RGB HSL Color Converter
Free color converter. Convert between HEX, RGB and HSL instantly, preview the color and co
Free Color Contrast Checker | WCAG Accessibility Tool
Free color contrast checker. Test text and background colors against WCAG AA and AAA stand