CSS filter Property
The filter property is used to apply visual effects to an element (image). The filter property has the following values:
- none
- blur
- brightness
- contrast
- drop-shadow
- grayscale
- hue-rotate
- invert
- opacity
- saturate
- sepia
- url
| Initial Value | none |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | CSS3 |
| DOM Syntax | object.style.filter = "hue-rotate(360deg)"; |
Syntax
Syntax of CSS filter Property
css
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;Example of the filter property:
Example of CSS filter Property with blur value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: blur(3px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "blur(3px)".</p>
<p>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Result
Example of using the filter property to make the image brighter:
Example of CSS filter Property with brightness value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: brightness(150%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "brightness(150%)".</p>
<p>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>In the following examples "grayscale" value makes the image gray:
Example of the filter property with the "grayscale" value:
Example of CSS filter Property with grayscale value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(80%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "grayscale(80%)".</p>
<p>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Here, "saturate" filter is applied to the image where the given value is 300%.
Example of the filter property with the "saturate" value:
Example of CSS filter Property with saturate value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: saturate(300%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "saturate(300%)".</p>
<p>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Example of the filter property with the "sepia" value:
Example of the filter property with the sepia value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: sepia(70%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "sepia(70%)".</p>
<p>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Example of the filter property with the "contrast" value:
Example of the CSS filter Property with contrast value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: contrast(40%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "contrast(40%)".</p>
<p>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Example of the filter property with the "opacity" value:
Example of the CSS filter property with the "opacity" value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: opacity(0.4);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "opacity(0.4)".</p>
<p>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Example of the filter property with the "invert" value:
Example of the CSS filter property with the "invert" value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: invert(0.7);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "invert(0.7)".</p>
<p>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Example of the filter property with the "hue-rotate" value:
Example of the CSS filter property with the "hue-rotate" value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: hue-rotate(90deg);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "hue-rotate(90deg)".</p>
<p>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| none | Applies no effect. This is the default value of this property. | Play it » |
| blur | Applies blur on an image. It is specified by a length value. The larger the value the more blur will be applied. If no value is applied, 0 is used. | Play it » |
| brightness | Makes the image brighter. If the value is 0 the image will be black. 100% is the default value and shows the original image. Values over 100% make the image brighter. | Play it » |
| contrast | Adjusts contrast of an image. If the value is 0 the image will be black. 100% is the default value and shows the original image. Values over 100% apply more contrast to the image. | Play it » |
| drop-shadow | Applies a drop shadow effect on the image. | Play it » |
| grayscale | Changes the image to grayscale. 0% is the value of original image. 100% makes the image grey. Negative values are not allowed. | Play it » |
| hue-rotate | Applies a hue rotation effect on the image. It is specified by degrees. Maximum value is 360 degrees. | Play it » |
| invert | Inverts the samples in the image. 0 is the default value. 100% makes the image fully inverted. | Play it » |
| opacity | Sets the opacity level for the image. It describes the transparency of the image. If the value is 0 the image is completely transparent. 100% is the current state of the image. | Play it » |
| saturate | Applies saturate effect on the image. 0% makes the image completely unsaturated. 100% is default value of the image. Values over 100% make the image super-saturated. | Play it » |
| sepia | Converts the image to sepia. Default value is 0%, 100% makes the image completely sepia. | Play it » |
| url | The url() function takes the location of an SVG file that specifies a filter, and may include an anchor to a specific filter element. | |
| initial | Makes the property use its default value. | |
| inherit | Inherits the property from its parents element. |
Practice
What are the different types of effects that can be achieved using the CSS filter property?