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

-webkit-filter: none; filter: none;

Reset

Browser Support

Chrome: 31+(-webkite-filter), Safari: 7+, Firefox:35+, Opera: 18+ (-webkit-filter), Android:4.4+ (-webkit-filter), iOS: 6+ (-webkit-filter)

  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.