Свойство filter в CSS позволяет добавлять визуальные эффекты к любому элементу (не только к изображениям), например, регулировать яркость, контрастность и т. д.
Существует также свойство backdrop-filter, которое использует тот же набор функций, но применяет их к фону элемента, а не к самому элементу.
Blur
.item {
filter:blur(50px;)
}Применяет размытие Гауса. Значение указывается в пикселях (px), устанавливая сколько соседних пикселей сливается друг с другом
Brightness
.item {
filter:brightnes(50%);
}Изменяет яркость изображения от абсолютно черного до абсолютно белого. Значени указывается в процентах (%), где 100% исходная аркость.
Contrast
.item {
filter:contrast(5%);
}Изменяет контрастность изображения. Значение указывается в процентах (%), где 100% исходное значение.
Drop shadow
.item {
filter:drop-shadow(4px 4px 8px #333333);
}Устанавливает изображению тень, как и свойство box-shadow. Но если box-shadow дает прямоугольную тень по коллизии изображения, то drop-shadow дает тень от непрозрачных элементов изображения. Значение указывается: расстояние по оси X, расстояние по оси Y степень размытия и цвет: 4px 4px 8px #000000.
Grayscale
.item {
filter:graydcale(25%);
}Делает изображение черно-белым. Значение задается в процентах (%), где 100% полностью черно-белое, а 0% — исходное изображение.
Hue rotate
.item {
filter:hue-rotate(90deg);
)Меняет цвета изображения за счет поворота цветового круга. Значение указывается либо в градусах (deg), либо в поворотах (turn).
Saturate
.item {
filter: saturate(150%);
}Меняет насыщенность (сатурацию) изображения. Значение указывается в процентах (%), где 100% — исходная насыщенность.
via @FrontendPortal
