Design Atlas
한국어
✦ Visual effects

backdrop-filter functions

backdrop-filter 함수

The same function list as filter — blur, brightness, grayscale… — applied not to the element itself but to whatever is visible behind it.

Also known as: 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 processes the element itself; backdrop-filter processes whatever shows through behind it. That means the element needs some transparency (alpha < 1 background) for the effect to be visible at all — over a fully opaque background there's nothing behind it to filter.

The most common use is blur() for a glass panel, but the function set is identical to filter's eight functions.

It's heavier than filter, because whatever sits behind it keeps changing (scroll, animation) and the browser has to recompute every frame. Safari needed the -webkit-backdrop-filter prefix for a long time and it's still safest to ship both. Like filter, an element with backdrop-filter gets its own stacking context.

When to use

For translucent panels floating over content (nav bars, modals). If what's behind scrolls often, keep the blur value low — a large one eats scroll frame budget.