filter

Применяет различные фильтры к изображению

.colorize-pink {
    filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
    filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
    filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

blur()

Размытие

filter: blur(length);

img {
    filter: blur(5px);
}

brightness()

Яркость

filter: brightness([ number | percentage ]);

img {
    filter: brightness(3);
    filter: brightness(0.5);
    filter: brightness(20%);
}

contrast()

Контраст

filter: contrast([ number | percentage ]);

img {
    filter: contrast(1.5);
}

drop-shadow()

Тень

filter: drop-shadow(length{2,3} color?)

img {
    filter: drop-shadow(5px 5px 5px #333);
}

grayscale()

Оттенки серого

filter: grayscale([ number | percentage ]);

img {
    filter: grayscale(70%);
    filter: grayscale(0.7);
}

hue-rotate()

Угол на цветовом круге

filter: grayscale(angle);

img {
    filter: hue-rotate(200deg);
}

invert()

Инверсия

filter: invert([ number | percentage ]);

img {
    filter: invert(70%);
    filter: invert(0.7);
}

opacity()

Прозрачность

filter: opacity([ number | percentage ]);

img {
    filter: opacity(70%);
    filter: opacity(0.7);
}

saturate()

Насыщенность

filter: saturate([ number | percentage ])

img {
    filter: saturate(3);
    filter: saturate(200%);
}

sepia()

Сепия, раскрашивает картинку в красно-коричневых тонах.

filter: sepia([ number | percentage ])

img {
    filter: sepia(70%);
    filter: sepia(0.7);
}

url()

#svg-filter {
    display: none;
}
img {
    filter: url(#svg-blur);
}