About this tool
Draw a frosted glass panel and copy the CSS.
Move the blur and the white opacity. The panel sits on a colored band so you can see the frost. The declaration uses backdrop-filter and a translucent background. Paste it on an element that has something visible behind it.
Older browsers may ignore backdrop-filter and show only the translucent fill. The effect is paint, not a photo filter, and it does not blur a file you upload. Keep text contrast high enough to read on the frost.
Read the privacy line on this page before you use the result in public.
Quick steps
- Draw a frosted glass panel and copy the CSS.
- Move the blur and the white opacity. The panel sits on a colored band so you can see the frost. The declaration uses backdrop-filter and a translucent background. Paste it on an element that has something visible behind it.
- Older browsers may ignore backdrop-filter and show only the translucent fill. The effect is paint, not a photo filter, and it does not blur a file you upload. Keep text contrast high enough to read on the frost.
Read the privacy line on this page before you use the result in public.
FAQ
Draw a frosted glass panel and copy the CSS.
Move the blur and the white opacity. The panel sits on a colored band so you can see the frost. The declaration uses backdrop-filter and a translucent background. Paste it on an element that has something visible behind it.
Older browsers may ignore backdrop-filter and show only the translucent fill. The effect is paint, not a photo filter, and it does not blur a file you upload. Keep text contrast high enough to read on the frost.
Read the privacy line on this page before you use the result in public.