CSS Filter Effects
Css filter are powerful css tool that user can use to apply visual effect, this css property provides access to effects like blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia etc..
The CSS Filter syntax is
.filter-class {
filter: filter-function(filter-value);
}
CSS filter property is:
- blur()
- grayscale()
- drop-shadow()
- sepia()
- brightness()
- contrast()
- hue-rotate()
- invert()
- saturate()
- opacity()
Multiple functions can be used, space separated. Below have example of multiple filters being used:
.filter-class {
filter: blur(10px) brightness(1.4) hue-rotate(30deg) ;
}
CSS Filter Tool
Browser Support
Chrome: 31+(-webkite-filter), Safari: 7+, Firefox:35+, Opera: 18+ (-webkit-filter), Android:4.4+ (-webkit-filter), iOS: 6+ (-webkit-filter)