Функции фильтров

Список функций, с помощью которых можно задать фильтры картинкам. Почти как в Инстаграме

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

CSS позволяет накладывать поверх картинок или фонов различные фильтры. Почти как в Инстаграме. Можно, например, размыть или обесцветить изображение, сделать его более контрастным.

Функции используются в качестве значений для свойств filter и backdrop-filter.

Пример

Секция статьи "Пример"
        
          
          div {  filter: saturate(2.2);}
          div {
  filter: saturate(2.2);
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

blur()

Секция статьи "blur()"

Примеряет размытие Гаусса к изображению. Значение в скобках указывает сколько пикселей сливаются друг с другом. Чем больше значение, тем больше размытие. Можно указать положительное значение в любых единицах измерения, кроме процентов.

        
          
          img {  filter: blur(3px);}
          img {
  filter: blur(3px);
}

        
        
          
        
      
Открыть демо в новой вкладке

brightness()

Секция статьи "brightness()"

Меняет яркость изображения. В скобках можно указать любое значение от 0% и выше. Значение 0% сделает изображение полностью чёрным. Значение 100% вернёт изображению исходную яркость. Значение больше 100% выкрутит яркость картинки. Значением может быть целое или дробное число без единиц измерения.

        
          
          img {  filter: brightness(30%);}
          img {
  filter: brightness(30%);
}

        
        
          
        
      
Открыть демо в новой вкладке

contrast()

Секция статьи "contrast()"

Меняет контраст изображения. В скобках можно указать любое значение от 0% и выше. Значение 0% сделает изображение полностью чёрным. Значение 100% вернёт изображению исходный контраст. Значение больше 100% усилит исходный контраст. Значением может быть целое или дробное число без единиц измерения.

        
          
          img {  filter: contrast(250%);}
          img {
  filter: contrast(250%);
}

        
        
          
        
      
Открыть демо в новой вкладке

drop-shadow()

Секция статьи "drop-shadow()"

Задаёт тень для картинки. Тень располагается снаружи элемента. Эта функция очень похожа на box-shadow по допустимым значениям и результату. Разница лишь в том, что нельзя указывать ключевое слово inset.

        
          
          img {  filter: drop-shadow(4px 4px red);}
          img {
  filter: drop-shadow(4px 4px red);
}

        
        
          
        
      
Открыть демо в новой вкладке

grayscale()

Секция статьи "grayscale()"

Делает изображение чёрно-белым. В скобках можно указать значение от 0% до 100%. Значение 100% сделает изображение полностью чёрно-белым. Значение 0% вернёт изображению исходные цвета. Значением может быть целое или дробное число без единиц измерения.

        
          
          img {  filter: grayscale(80%);}
          img {
  filter: grayscale(80%);
}

        
        
          
        
      
Открыть демо в новой вкладке

hue-rotate()

Секция статьи "hue-rotate()"

Меняет цвета изображения за счёт поворота цветового круга. Угол поворота указывается в скобках функции. Можно указывать угол в градусах deg или в поворотах turn.

        
          
          img {  filter: hue-rotate(0.5turn);}
          img {
  filter: hue-rotate(0.5turn);
}

        
        
          
        
      
Открыть демо в новой вкладке

invert()

Секция статьи "invert()"

Инвертирует цвета изображения, как бы выворачивает их, превращая в противоположные. В результате получается что-то вроде негатива. Можно указать процент инверсии от 0% до 100%. При 100% цвета на картинке полностью инвертированы. Отрицательные значения или значения больше 100% не допускаются.

        
          
          img {  filter: invert(100%);}
          img {
  filter: invert(100%);
}

        
        
          
        
      
Открыть демо в новой вкладке

opacity()

Секция статьи "opacity()"

Меняет прозрачность изображения. Можно указать процент прозрачности от 0% до 100%. 0% делает картинку полностью прозрачной. 100% не меняет прозрачность изображения. Отрицательные значения или значения больше 100% не допускаются.

Очень похоже на работу свойства opacity с той разницей, что для фильтра браузер, как правило, применяет аппаратное ускорение для улучшения производительности.

        
          
          img {  filter: opacity(40%);}
          img {
  filter: opacity(40%);
}

        
        
          
        
      
Открыть демо в новой вкладке

saturate()

Секция статьи "saturate()"

Меняет насыщенность цветов изображения. Значение 0% полностью убирает насыщенность цветов. Значение 100% не изменяет исходное изображение. Допускаются значения больше 100% что приводит к перенасыщенности. Нельзя указать отрицательное значение.

        
          
          img {  filter: saturate(390%);}
          img {
  filter: saturate(390%);
}

        
        
          
        
      
Открыть демо в новой вкладке

sepia()

Секция статьи "sepia()"

Меняет цвета изображения на сепию — коричневые оттенки. Значение 100% полностью преобразует изображение в сепию. Значение 0% не изменяет исходное изображение. Отрицательные значения или значения больше 100% не допускаются. Можно использовать целое или дробное число без единиц измерения в качестве значения.

        
          
          img {  filter: sepia(0.6);}
          img {
  filter: sepia(0.6);
}

        
        
          
        
      
Открыть демо в новой вкладке

Все фильтры сразу

Секция статьи "Все фильтры сразу"
Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

💡 Можно указать сразу несколько фильтров для одного элемента, перечислив их через пробел.

На практике

Секция статьи "На практике"

Елена Соколовская

Секция статьи "Елена Соколовская"

🛠 С помощью drop-shadow() мы можем создать тень по форме самого изображения. Функция учитывает альфа-канал картинки и способна отбрасывать не только прямоугольную тень, как в случае с box-shadow.

        
          
          .box-shadow {  box-shadow: 4px 4px 10px red;}.drop-shadow {  filter: drop-shadow(4px 4px 10px red);}
          .box-shadow {
  box-shadow: 4px 4px 10px red;
}
.drop-shadow {
  filter: drop-shadow(4px 4px 10px red);
}

        
        
          
        
      
Открыть демо в новой вкладке