Вы здесь

CSS свойство filter

Свойство filter позволяет применить различные художественные эффекты к элементам. Обычно используется для изображений, чтобы размыть их, увеличить контрастность, преобразовать в чёрно-белую картинку и др.

CSS синтаксис

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Возможные значения

Значение Описание
none Значение по умолчанию. Эффекты не применяются.
blur(px) Задаёт размытие по Гауссу изображений, фоновых картинок или текста. Чем больше значение, тем сильнее эффект размытия. Если значение не указано, то используется значение 0.
brightness(%) Понижает или повышает яркость изображений или фоновых картинок. 0% сделает избражение полностью черным, 100% - значение по умолчанию и представляет оригинальное изображение. Значения больше 100% увеличивают яркость изображения.
contrast(%) Понижает или повышает контрастность изображений или фоновых картинок. Значение 100% или 1 оставляет изображение исходным. Любые значения меньше 100% (или меньше 1) понижают контрастность изображения. При этом 0 даёт однотонную серую картинку. Значения больше 100% (или больше 1) повышают контрастность изображения. Отрицательное значение не допускается. Пустое значение воспринимается как 1
drop-shadow(x-сдвиг y-сдвиг размытие цвет)

Добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Параметры:

x-сдвиг - Обязательный параметр. Смещение тени по горизонтали относительно картинки. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное - влево.

y-сдвиг - Обязательный параметр. Смещение тени по вертикали относительно картинки. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх.

размытие - Необязательный параметр. Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой.

цвет - Необязательный параметр. Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная.

При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color.

grayscale(%) Преобразует цвета изображения в граации серого. 0% (или 0) - значение по умолчанию, представляющее исходное изображение. 100% (или 1) сделает изображение полностью черно-белым. Отрицательные значения запрепщены.
hue-rotate(градус) Применяет к изображению цветовой сдвиг. В качестве значения указывается угол (к примеру: 45deg), который задаёт поворот оттенка на цветовом круге. Минимальное значение 0, максимальное 360 градусов.
invert(%) Инвертирует цвета в изображении. По результату данный фильтр схож с преобразованием изображения в негатив. 0% (или 0) - значение по умолчанию, представляющее исходное изображение. 100% (или 1) - полная инверсия цветов изображения. Отрицательные значения запрепщены.
opacity(%) Устанавливает степень прозрачности изображения. Похож на свойство opacity, однако некоторые браузеры для фильтров применяют аппаратное ускорение, чтобы повысить их производительность. 0% (или 0) - изображение полностью прозрачно. 100% (или 1) - значение по умолчанию, представляющее исходное изображение (прозрачность тсутствует). Отрицательные значения запрепщены.
saturate(%) Изменяет насыщенность цветов в изображении. Значение 0% (или 0) полностью убирает насыщенность цветов в изображении, превращая его в чёрно-белое. Значение 100% (или 1) оставляет изображение неизменным. Любые значения больше 100% или больше 1 делают цвета в изображении более насыщенными. Отрицательные значения запрепщены.
sepia(%) Преобразует изображение в сепию (чёрно-белое изображение с коричневым оттенком). Сепия придаёт фотографиям старинный вид. 0% (или 0) - значение по умолчанию, представляющее исходное изображение. 100% (или 1) - полностью превращает изображение в сепию. Отрицательные значения запрепщены.
url(URL) Функция url() принимает в качестве параметра ссылку на XML файл, определяющий SVG фильтр. При этом может включать анкор, указывающий на элемент фильтра. Например, filter: url(svg-url#element-id).
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Изменить цвет всех изображений на черно-белый (100% градации серого)


img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}