디자인 아틀라스
EN
✦ 시각 효과

backdrop-filter 함수

backdrop-filter functions

filter 와 같은 함수 목록(blur·brightness·grayscale…)을 요소 "자신"이 아니라 "뒤에 비치는 배경"에 적용하는 속성.

다른 이름: backdrop-filter property
···
html
<div class="bg"></div><div class="panel" id="pn"><span id="l">blur(0px)</span></div>
css
.bg{position:absolute;inset:-12%;animation:drift 6s ease-in-out infinite alternate;background:
  radial-gradient(circle at 20% 30%,#ff5c8a 0 22%,transparent 34%),
  radial-gradient(circle at 75% 20%,#5b5bf7 0 20%,transparent 32%),
  radial-gradient(circle at 50% 82%,#18c29c 0 24%,transparent 36%)}
@keyframes drift{to{transform:translate(4%,-3%)}}
.panel{position:absolute;left:19%;top:22%;width:62%;height:56%;border-radius:18px;border:1px solid rgba(255,255,255,.35);
  display:grid;place-items:center;color:#fff;font:600 13px/1.4 monospace;text-align:center;
  transition:backdrop-filter .5s,-webkit-backdrop-filter .5s}
js
const FILTERS = ['blur(8px)','brightness(1.6)','contrast(2)','grayscale(1)','hue-rotate(140deg)','invert(1)','sepia(1)','saturate(3)'];
const pn = document.getElementById('pn');
const l = document.getElementById('l');
let i = 0;
function apply(){ const css = FILTERS[i]; pn.style.backdropFilter = css; pn.style.webkitBackdropFilter = css; l.textContent = 'backdrop-filter: ' + css; i = (i + 1) % FILTERS.length; }
apply();
setInterval(apply, 1400);

filter 는 요소 자신을 처리하고, backdrop-filter 는 요소 뒤로 비치는 배경을 처리합니다. 그래서 backdrop-filter 가 보이려면 요소 자체는 반투명(background 에 alpha < 1)이어야 합니다 — 완전 불투명 배경이면 뒤가 아예 안 보이니 필터도 무의미합니다.

가장 흔한 쓰임은 blur() 로 유리판 느낌을 내는 글래스모피즘이지만, 함수 자체는 filter 와 동일하게 8종 전부 씁니다.

성능은 filter 보다 더 무겁습니다 — 뒤에 있는 콘텐츠가 스크롤·애니메이션으로 계속 바뀌면 매 프레임 다시 계산해야 하기 때문입니다. Safari 는 오래도록 -webkit-backdrop-filter 접두어가 필요했고 지금도 함께 써주는 게 안전합니다. backdrop-filter 를 건 요소도 filter 와 마찬가지로 새 스태킹 컨텍스트를 만듭니다.

언제 쓰나

콘텐츠 위에 뜨는 반투명 패널(내비 바, 모달)에 씁니다. 뒤가 자주 바뀌는 화면(스크롤 리스트)에서 큰 blur 는 스크롤 프레임을 잡아먹으니 값을 낮게 유지하세요.