CSS: CSS backdrop-filter - эффект стекла (Glassmorphism)

Создаёт эффект размытия и/или других фильтров для подложки за элементом — будто матовое стекло. Используется поверх полупрозрачного фона (rgba/hsla) или с background: transparent.

/* Полупрозрачная заливка, чтобы размытая подложка была видна */
background: rgba(255, 255, 255, 0.25);

/* Сам эффект */
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);

• backdrop-filter — применяет CSS-фильтры к «фону позади» элемента (не к самому содержимому).
• blur(4px) — радиус размытия. Часто используют 4–12px. Можно комбинировать: blur(8px) saturate(120%) contrast(105%).

Важные нюансы

• Нужна прозрачность. Если фон непрозрачный, размывать будет нечего — эффект не виден.
• Производительность. Размытие считается на GPU и может быть тяжёлым на больших областях/анимациях.
• Слои и перекрытия. Элемент должен реально видеть то, что за ним (не перекрыт непрозрачными слоями).
• Доступность. Не снижайте контраст текста; при необходимости добавляйте затемнение фона: background: rgba(0,0,0,.3) + blur.