Как следует из названия, свойство backdrop-filter используется для добавления фильтра к фону элемента. Он похож на свойство CSS filter и разделяет его значения, однако стоит понимать четкую разницу: filter - для всего элемента, backdrop-filter - для его фона.

Самый популярный пример использования свойства backdrop-filter - отображение эффекта матового стекла:

Свойство может иметь несколько значений и синтаксически выглядит примерно так:

.element {
  backdrop-filter: brightness(150%) saturate(150%) blur(5px);
}

Также стоит отметить - чтобы увидеть эффекты свойства, некоторые части элемента должны иметь полупрозрачность. Если, например, элемент будет иметь сплошной фоновый цвет или фоновое изображение, эффекты свойства не будут видны.

Значения свойства backdrop-filter

Свойство может применять следующие значения:

  • blur - размытие, обычно задается в пикселях; чем больше значение - тем больше размытие

  • brightness - яркость, принимает числовое или процентное значение; 100% или 1 - нормальная яркость, значение ниже 100% или 1 сделает область темнее, а выше - ярче

  • contrast - контраст, принимает числовое или процентное значение; 100% или 1 - нормальный контраст, значение ниже понизит контраст и наоборот

  • grayscale - оттенок серого, принимает числовое или процентное значение; любое число между 0% и 100% или 0 и 1 приводит к применению серого фильтра соответственной насыщенности

  • hue-rotate - поворот угла цветового круга, принимает значение угла от 0 до 360 (0 - красный, 120 - зеленый, 240 - синий), которое показывает, насколько должен измениться оттенок

  • invert - инвертирование, принимает число или процент; 0 или 0% - эффект не применяется, 1 и 100% - фон будет полностью инвертирован

  • opacity - прозрачность, принимает числовое значение от 0 до 1 или процентное от 0 до 100%; фильтр очень хорошо виден в сочетании со свойством mix-blend-mode

  • sepia - тон сепии, принимает число от 0 до 1 или процент от 0 до 100%, регулирующее уровень тона сепии

  • saturate - насыщенность, принимает число от 0 до 1 или процент от 0 до 100%, регулирующее уровень насыщенности

  • drop-shadow - падающая тень от пересекающегося блока, принимает 3 значения (смещение по оси x, смещение по оси y и радиус размытия), а также цвет в конце; пример работы этого необычного значения можно посмотреть на демке

Примеры использования backdrop-filter