CSS filter Property
Example
.example {
filter: blur(2px);
}
Meaning
The filter property applies graphical effects like blur or color shift to an element.
Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
| Default value: | none |
| Inherited: | No |
| Animatable: | Yes |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| none | This is default value. Specifies no effects. |
| blur(px) | Specifies a blur effect to the image. |
| brightness(%) | Specifies the brightness of the image. |
| contrast(%) | Specifies the contrast of the image. |
| drop-shadow(h-shadow v-shadow blur spread color) | Specifies a drop shadow effect to the image. |
| grayscale(%) | Specifies a grayscale effect to the image. |
| hue-rotate(deg) | Specifies a hue rotation on the image. |
| invert(%) | Inverts the samples in the image. |
| opacity(%) | Sets the opacity level for the image. |
| saturate(%) | Saturates the image. |
| sepia(%) | Converts the image to sepia. |
| url() | Specifies takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
filter: none;
}