CSS backdrop-filter — розмиття тла за елементом

CSS властивість backdrop-filter застосовує графічні ефекти до того, що видно крізь елемент: розмиття, зміну яскравості чи насиченості.

правити

Загальний опис

Різниця з filter в об'єкті дії: filter обробляє сам елемент, backdrop-filter — те, що позаду нього. Сам елемент лишається чітким.

Головний ефект — матове скло (frosted glass): напівпрозора шапка чи модальне вікно з backdrop-filter: blur(10px) розмиває вміст, що прокручується під ними. Так виглядають системні панелі macOS та iOS.

Обов'язкова умова: елемент має бути хоч трохи прозорим — крізь непрозоре тло ефекту просто не видно. Типова пара: background: rgb(255 255 255 / .6) + розмиття.

Ефект недешевий для відеокарти: на слабких пристроях великі розмиті області можуть гальмувати прокрутку.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	76	103	18	63	79	—

Підтримка: мобільні переглядачі

Переглядач
	76	76	103	18

Приклади

+ запропонувати свій приклад у пісочниці

<header class="glass">Шапка</header>
<p>Прокрути — вміст розмивається під шапкою.</p>
<p style="height:60vh">Довгий вміст…</p>

.glass {
    position: sticky;
    top: 0;
    padding: 1rem;
    /* напівпрозорість обов'язкова — крізь непрозоре ефекту не видно */
    background: rgb(255 255 255 / .55);
    backdrop-filter: blur(10px);
}