backdrop-filter

Свойство backdrop-filter позволяет применять визуальные эффекты (размытие, контраст, прозрачность и т. д.) к фону элементов, находящихся за целевым элементом. Оно работает так же, как свойство filter, но вместо того, чтобы изменять сам элемент, применяется только к его фону. Чтобы эффект заработал, у элемента должен быть прозрачный фон (rgba, opacity, transparent и т.д.), иначе backdrop-filter не будет заметен.

        
          
          div {  backdrop-filter: blur(15px);}
          div {
  backdrop-filter: blur(15px);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В качестве значения можно задать один или несколько фильтров, перечисляя их через пробел. Вот какие значения можно использовать:

• blur(px) — размытие фона. Например, blur(15px) создаст эффект размытого стекла.
• brightness(%) — регулирует яркость заднего фона. brightness(150%) делает фон ярче, а brightness(50%) затемняет его.
• contrast(%) — изменяет контрастность. Значение contrast(200%) увеличит контраст вдвое, а contrast(50%) сделает его ниже.
• grayscale(%) — переводит фон в оттенки серого. grayscale(100%) полностью уберёт цвета, а grayscale(50%) сделает их менее насыщенными.
• opacity(%) — управляет прозрачностью фона. Например, opacity(50%) сделает фон полупрозрачным.
• sepia(%) — придаёт фону тёплый, коричневатый оттенок. sepia(100%), стилизует его под старую фотографию.
• hue-rotate(deg) — изменяет оттенок фона. Например, hue-rotate(90deg) сдвинет цветовой тон на 90 градусов по кругу HSL.
• invert(%) — инвертирует цвета. invert(100%) полностью перевернёт цвета, делая их противоположными.
• none — сбрасывает все фильтры, фон остаётся без изменений.

Попробуйте разные фильтры в интерактивном примере ниже:

Более подробно о фильтрах можно узнать в статье о функциях фильтров.

💡 Можно указать несколько функций через пробел. Причём при разном порядке функций результат будет отличаться.

💡 Поддержка в браузерах хорошая, но в более старых версиях Safari может потребоваться префикс -webkit.

На практике

Скопировать ссылку "На практике" Скопировано

Лея М советует

Скопировать ссылку "Лея М советует" Скопировано

🛠 Глассморфизм, или эффект «матового стекла», — популярный приём в современных интерфейсах. Он создаётся за счёт полупрозрачного фона с размытием, через который просвечивает задний фон. С появлением backdrop-filter его стало гораздо проще реализовать. Попробуйте понастраивать параметры в демке!