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 | |||||
 |
 |
 |
 |
 |
 |
| X | 12 | 53 | 35 | 40 | 9.1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 53 | 53 | 35 | 41 | 9.3 | 6.0 |
Last updated by CSSPortal on: 26th July 2020
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
URL