Применяет различные фильтры к изображению
.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);
}
Рамзытие
filter: blur(length);
img {
filter: blur(5px);
}
Яркость
filter: brightness([ number | percentage ]);
img {
filter: brightness(3);
filter: brightness(0.5);
filter: brightness(20%);
}
Контраст
filter: contrast([ number | percentage ]);
img {
filter: contrast(1.5);
}
Тень
filter: drop-shadow(length{2,3} color?)
img {
filter: drop-shadow(5px 5px 5px #333);
}
Оттенки серого
filter: grayscale([ number | percentage ]);
img {
filter: grayscale(70%);
filter: grayscale(0.7);
}
Угол на цветовом круге
filter: grayscale(angle);
img {
filter: hue-rotate(200deg);
}
Инверсия
filter: invert([ number | percentage ]);
img {
filter: invert(70%);
filter: invert(0.7);
}
Прозрачность
filter: opacity([ number | percentage ]);
img {
filter: opacity(70%);
filter: opacity(0.7);
}
Насыщенность
filter: saturate([ number | percentage ])
img {
filter: saturate(3);
filter: saturate(200%);
}
Сепия
filter: sepia([ number | percentage ])
img {
filter: sepia(70%);
filter: sepia(0.7);
}
#svg-filter {
display: none;
}
img {
filter: url(#svg-blur);
}