CSS 라이브 데모: backdrop-filter 데모 버튼을 클릭해 보세요!
selector {
    backdrop-filter: none | <filter>
}
/* 키워드 값 */
backdrop-filter: none;

/* 단일한 <filter> 값 */
backdrop-filter: blur(5px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(150deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
backdrop-filter: url(common-filters.svg#filterid); /* SVG 필터 URL */

/* 여러 개의 값 */
backdrop-filter: blur(4px) saturate(150%);
backdrop-filter: blur(4px) saturate(150%) grayscale(30%);
backdrop-filter: url(common-filters.svg#filterid) blur(4px);

/* 글로벌 값 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
.sticky-header {
    position: sticky;
    top: 0;
    height: 70px;
    background-color:  rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid #fff;
    backdrop-filter: blur(40px);
}
<header class="sticky-header">Sticky Header</header>
<main>
    <!-- Content... -->
</main>
실제 적용된 모습 페이지를 스크롤할 때 고정된 헤더의 배경을 흐림 처리
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}
<h4>모달 오버레이</h4>
<p>'대화 상자 열기' 버튼을 클릭하세요!</p>
<dialog id="my-dialog">  
    <p>이것은 대화 상자입니다.</p>
    <button id="close-btn" type="button" autofocus>대화 상자 닫기</button>
</dialog>
<button id="open-btn" type="button">대화 상자 열기</button>
const dialog = document.getElementById("my-dialog");
const showButton = document.getElementById("open-btn");
const closeButton = document.getElementById("close-btn");

// "대화 상자 열기" 버튼을 클릭하면 대화 상자가 모달 형식으로 엽니다. 
showButton.addEventListener("click", () => {
    dialog.showModal();
});

// "대화 상자 닫기" 버튼을 클릭하면 대화 상자를 닫습니다.
closeButton.addEventListener("click", () => {
    dialog.close();
});
실제 적용된 모습