CSS backdrop-filter Property

Description

The backdrop-filter CSS property is a powerful styling feature that allows developers to apply graphical effects to the area behind an element, commonly used in combination with the blur() function. This property enables a wide range of visual effects, such as blurring, grayscale, contrast adjustments, and more, to be applied to the background of an element without affecting the content inside it. It's especially useful for creating visually appealing and aesthetically pleasing designs, such as frosted glass or translucent overlays, by adding depth and dimension to web interfaces.

Initial value: none
Applies to: all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited: no
Computed value: as specified
Animatable: a filter function list
JavaScript syntax: object.style.backdropFilter

Interactive Demo

backdrop-filter: blur(10px);

backdrop-filter: invert(80%);

backdrop-filter: brightness(25%);

backdrop-filter: grayscale(90%);

backdrop-filter: sepia(100%);

Backdrop Filter Demo

Syntax

backdrop-filter: none | filter

Values

noneNo filter is applied to the backdrop.
filterCSS filters include blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), and sepia().

Example

HTML

<div class="box">

   <p>Backdrop-Filter CSS Property</p>

  </div>

CSS

body {   
    background: url(images/sunset.jpg) center/cover fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100vh;
}
.box {
    backdrop-filter: blur(4px);
    background: rgba(255,255,255,0.4);
    width: 300px;
    padding: 20px;
}

Result

Editor