CSS3-свойство filter позволяет применить фильтры к элементам, с помощью них можно инвертировать цвета, осветлить или затемнить элементы, полное описание на developer.mozilla.org.
В данной статье представлены только основные фильтры по цвету, по мимо них есть наложение тени и фильтры с использованием SVG.
Размытие по Гауссу, значение задается в px или em, по умолчанию 0, отрицательные значения не допускается.
img {
filter: blur(0px);
}Понижение или повышение яркости изображения, значение задается в процентах или числом. По умолчанию 100% или 1, отрицательное значение не допускается.
img {
filter: brightness(100%);
}Понижение или повышение контраста изображения, значение задается в процентах или числом, по умолчанию 100% или 1, отрицательное значение не допускается.
img {
filter: contrast(100%);
}Обесцвечивание, значение от 0% до 100% или число от 0 до 1, отрицательное значение не допускается.
img {
filter: grayscale(0%);
}Замена цветов, в качестве значения указывается угол (deg) от 0 до 360, значение может быть отрицательным.
img {
filter: hue-rotate(0deg);
}Инверсия цветов, значение от 0% до 100% или число от 0 до 1, отрицательное значение не допускается.
img {
filter: invert(0%);
}Прозрачность элемента. Значение от 0% до 100% или от 0 до 1, по умолчанию 100%.
img {
filter: opacity(100%);
}Насыщенностью цветов, интенсивность задаётся положительным числом или процентами, по умолчанию 1 или 100%.
img {
filter: saturate(100%);
}Сепия или эффект старины, значение от 0% до 100%.
img {
filter: sepia(0%);
}
