Filtering
CSS filter property is a powerful tool that allows you adding filters to the images. We’ll cover some examples of all the filters defined for CSS.
.filter-img {
filter:
filter-name
(filter-value);
}
-
Grayscale
.grayscale {
filter: grayscale (1);
} -
Sepia
.sepia {
filter: sepia (1);
} -
Contrast
.contrast {
filter: contrast (2);
} -
Brightness
.brightness {
filter: brightness (2);
} -
Saturate
.saturate {
filter: saturate (1);
} -
Invert
.invert {
filter: invert (.8);
} -
Opacity
.opacity {
filter: opacity (.1);
} -
Hue-rotate
.hue-rotate {
filter: hue-rotate (90deg);
} -
Blur
.blur {
filter: blur (2px);
}
Combine Filters
You can use multiple filters in one declaration to create infinite custom effects.
-
Combine filter
.contrast-saturate-sepia {
filter: contrast (1.4)
saturate (1.8)
sepia (.6);
} -
Combine filter
.drop-shadow-saturate-contrast {
filter: contrast (1.6)
saturate (.6)
drop-shadow (4px 4px 4px
rgba(0,0,0,0.6));
} -
Combine filter
.grayscale-invert-contrast {
filter: grayscale (.6)
invert (.7)
contrast (2);
}