The backdrop-filter property applies filter effects to the area behind the element (backdrop) — useful for frosted glass effects. The element itself must be (semi-)transparent to see the effect..panel {
backdrop-filter: blur(10px);
}.panel {
backdrop-filter: blur(8px) brightness(0.8) saturate(1.5);
background: rgba(255 255 255 / 0.3);
}noneThe default value. No filter applied.blur()Gaussian blur — blur(radius).brightness()Brightness — brightness(amount).contrast()Contrast — contrast(amount).drop-shadow()Drop shadow — drop-shadow(x y blur color).grayscale()Grayscale — grayscale(amount).hue-rotate()Hue rotation — hue-rotate(angle).invert()Color inversion — invert(amount).opacity()Opacity — opacity(amount).saturate()Saturation — saturate(amount).sepia()Sepia — sepia(amount).url()Reference to external SVG filter.Filter Effects Module Level 2Editor's DraftW3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
