Различные фильтры, доступные в CSS

Свойство 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