Design frosted-glass CSS with live backdrop-filter preview, presets, borders, drop-shadows, and IDE-ready CSS output including -webkit prefix.
Workspace
Frosted glass effects on content behind a translucent panel.
Presets
Filters
Drop shadow
Optional drop-shadow layers on the panel.
Panel
Scene
Preview
Live backdrop-filter
blur(16px) saturate(140%)
Frosted panel
Effects apply to content behind this element
Copy · Download
CSS outputcss | backdrop-filter.css
.backdrop-panel {
width: 70%;
height: 180px;
background-color: rgba(255, 255, 255, 0.28);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
}Keep exploring
Design frosted-glass UI with tint, blur, saturate, borders, shadows, scene backgrounds, shape presets, and IDE-ready CSS including -webkit-backdrop-filter.
Open toolStack blur, brightness, contrast, saturate, hue, grayscale, sepia, invert, opacity, and drop-shadow with live before/after preview and IDE-ready CSS.
Open toolClick a question to open it. Click again to close.
Looking for more? Browse Our Tools.