CSS filter Property

Description

The filter CSS property is used for applying artistic effects to elements.
Typically used for images to blur, increase contrast, convert to black and white, and more.

Need some help with the filter property? If yes, then check out our online CSS Image Filter Generator to see the filter property being used.

Initial value
none
Applies to
All elements
Inherited
No
Media
Visual
Computed value
As specified
Animatable
Yes
CSS Version
CSS1, CSS2, CSS3
JavaScript syntax
object.style.filter

Syntax

filter: <filter-function> [<filter-function>]* | none

Values

none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
  • blur()Filter for blurring the image. The amount of blur is specified in pixels. If no number is specified, the default is 0.
  • brightness()The function brightness() dims or brightens images or background pictures.
  • contrast()The function contrast() decreases or increases the contrast of images or background pictures.
  • drop-shadow()The function drop-shadow() adds shadow to images. In contrast to the property box-shadow, transparent areas in the image are taken into account and the shadow is cast taking them into account.
  • grayscale()The function grayscale() turns the image into black and white.
  • hue-rotate()The hue-rotate() function applies a hue rotation on the input image. The value of angle defines the number of degrees around the color circle the input samples will be adjusted.
  • invert()The invert() function inverts the samples in the input image. The value of amount defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged.
  • opacity()The opacity() function applies transparency to the samples in the input image. The value of amount defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
  • saturate()The saturate() function saturates the input image. The value of amount defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged.
  • sepia()The sepia() function converts the input image to sepia. The value of amount defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged.
  • url()A CSS link to an SVG element with a specific #id.

Example

For examples of all the filter property functions, please check out our <a target="_blank" href="../css-image-filter-generator/">css image filter generator</>

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X125335409.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
535335419.36.0

Last updated by CSSPortal on: 26th July 2020