Studio

Glass composer

Tune frosted-glass surfaces with backdrop-filter. Drag the controls — the preview updates over an animated vivid backdrop.

Frosted surface

backdrop-filter preview · 16px blur

Controls

Blur16pxSaturation160%Brightness110%

Tint

Tint opacity0.18

Border opacity0.35Border width1pxBorder radius20px

CSS

background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(16px) saturate(160%) brightness(110%);
-webkit-backdrop-filter: blur(16px) saturate(160%) brightness(110%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 20px;