CSS filter Property
Description
The CSS filter
property is used to apply visual effects to HTML elements, altering their appearance by manipulating attributes like brightness, contrast, blur, and more. It allows web developers to create various visual effects, such as grayscale, blur, color manipulation, and even animations. This property is particularly useful for enhancing user interface design and adding creative elements to web pages, giving designers and developers greater control over the visual aesthetics of their content.
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
- Computed value
- As specified
- Animatable
- Yes
- JavaScript syntax
- object.style.filter
Interactive Demo
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
The following table will show you the current browser support for the CSS filter
property.
Desktop | |||||
12 | 53 | 35 | 40 | 9.1 |
Tablets / Mobile | |||||
53 | 35 | 41 | 9.3 | 6 | 53 |
Last updated by CSSPortal on: 1st January 2024