The filter property specifies visual effects to an element. The CSS filter property is used for the effects like blur or color change of an element.  Filters are commonly used to alter the rendering of an image, a background, or border

Filter effects types:

  • blur()
  • contrast()
  • brightness()
  • grayscale()
  • drop-shadow()
  • hue-rotate()
  • opacity()
  • sepia()
  • invert()
  • saturate()
  • url() - for applying SVG filters
  • custom()

Syntax:

selector { 

    filter:  blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert()| opacity() | saturate()  | sepia() | url() | none  | initial | inherit;

}

Values:

The values used for the filter property are explained here:

  • blur(); Creates a blur effect with larger numbers (pixels) meaning more blur.
  • brightness(); Changes the brightness of an image (%, 0.00).
  • contrast(); Changes the contrast of an image (%, 0.00).
  • drop-shadow(); Creates a drop-shadow effect. Possible values in order of appearance)
    • h-shadow - A required value (pixels) that creates a horizontal shadow (negative values are allowed).
    • v-shadow - A required value (pixels) that creates a vertical shadow (negative values are allowed).
    • blur - An optional value (pixels) that adds some blur to the shadow. Larger value adds more blur.
    • spread - An optional value (pixels) that expands the shadow with larger numbers meaning larger spread. Negative numbers are allowed.
    • color - An optional value (color) that changes the color of the shadow (default is usually black).
  • grayscale(); Makes an image appear as a grayscale mode. The value (%) of 100% will convert image to a complete gray.
  • hue-rotate(); Applies a hue-rotation (deg) on an image, meaning it applies given degrees to a standard color circle. 0 degrees makes an image keeping it's default state.
  • invert(); It inverts an image's colors (%) with 100% being a maximum inversion.
  • opacity(); Defines the opacity (transparency) levels (%) of an image with 0 being completely "see-trough".
  • saturate(); It saturates an image (number) with 100 being completely saturated. It is interesting to know that this method allows a higher than 100 values, in which case it makes a "super-saturated" image.
  • sepia(); Gives an image a sepia effect (%) with the 100% being all the way in sepia mode.
  • url(); Allows us to give a path (including anchors) of a XML file specifying an SVG filter to be applied. 
  • none; This is the default values and, if used, completely omits the filter property.
  • initialinherit
NOTE: To apply multiple filters, separate each filter with a space.
NOTE: Filters that use lengths represented with percentage (%) may also use decimals (0.00).

Examples

The example with filter property and blur(), brightness() and contrast() effects:

The example with filter property and drop-shadow(), grayscale() and hue-rotate() effects:

The example with filter property and invert() and opacity():

The example with filter property and saturate() and sepia() effects:

 

›› go to examples ››