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);
}
_images/image.png

blur()

Рамзытие

filter: blur(length);
img {
    filter: blur(5px);
}
_images/image.png

brightness()

Яркость

filter: brightness([ number | percentage ]);
img {
    filter: brightness(3);
    filter: brightness(0.5);
    filter: brightness(20%);
}
_images/image.png

contrast()

Контраст

filter: contrast([ number | percentage ]);
img {
    filter: contrast(1.5);
}
_images/image.png

drop-shadow()

Тень

filter: drop-shadow(length{2,3} color?)
img {
    filter: drop-shadow(5px 5px 5px #333);
}
_images/image.png

grayscale()

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

filter: grayscale([ number | percentage ]);
img {
    filter: grayscale(70%);
    filter: grayscale(0.7);
}
_images/image.png

hue-rotate()

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

filter: grayscale(angle);
img {
    filter: hue-rotate(200deg);
}
_images/image.png

invert()

Инверсия

filter: invert([ number | percentage ]);
img {
    filter: invert(70%);
    filter: invert(0.7);
}
_images/image.png

opacity()

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

filter: opacity([ number | percentage ]);
img {
    filter: opacity(70%);
    filter: opacity(0.7);
}
_images/image.png

saturate()

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

filter: saturate([ number | percentage ])
img {
    filter: saturate(3);
    filter: saturate(200%);
}
_images/image.png

sepia()

Сепия

filter: sepia([ number | percentage ])
img {
    filter: sepia(70%);
    filter: sepia(0.7);
}
_images/image.png

url()

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