The filter property adds visual effects to images.
Filter effects include blur, color shift, grayscale, drop-shadow, etc.
The filter property can also be used for backgrounds and borders.
An image with filter set to saturate(7).
<style>
.saturate {
filter: saturate(7);
}
</style>
<img class="saturate" src="/img/css/sunflowers.jpg"
alt="Sunflowers by Van Gogh">
filter: none | blur() | brightness() | contrast() |
drop-shadow() | grayscale() | hue-rotate() |
invert() | opacity() | saturate() |
sepia() | url();
| Filter | Description |
|---|---|
| none | No filter effect. This is the default. |
| blur(px) | Image blur effect. Larger pixel values create a stronger blur. |
| brightness(%) | Image brightness effect. 0% is completely black; 100% is original image; > 100% is more brightness. |
| contrast(%) | Image contrast effect. 0% is completely black; 100% is original image; > 100% is more contrast. |
| drop-shadow( h-shadow, v-shadow, blur, spread, color) |
Image drop shadow effect. Argument values: h-shadow = horizontal shadow value in pixels -- required. v-shadow = vertical shadow value in pixels -- required. blur = blur effect in pixels -- optional. spread = spread effect in pixels -- optional. color = shadow color -- optional. |
| grayscale(%) | Image grayscale effect. 0% is the original image; 100% makes image completely black and white (gray). |
| hue-rotate(deg) | Image hue rotation effect. 0deg is the original image. Other values define the angle (in degrees) in the color circle. |
| invert(%) | Image color inversion effect. 0% is the original image. 100% makes the image completely inverted. |
| opacity(%) | Defines image opacity (transparency). 0% is completely transparent; 100% is the original image (no transparency). |
| saturate(%) | Image color saturation effect. 0% is completely un-saturated; 100% is the original image; > 100% creates super-saturated images. |
| sepia(%) | Image sepia color effect. 0% is the original image; 100% is a complete sepia image. |
url(xml-file) |
Specifies an XML file with an SVG filter that may include an anchor to a filter element. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different filter values and their effects.
<style>
.filter-example {
filter: invert(100%);
}
</style>
<img class="filter-example" src="/img/css/sunflowers.jpg"
alt="Sunflowers by Van Gogh">
The filter property can also be applied to background images.
This background image has been blurred.
<style>
.background {
background-image: url('/img/css/church-at-auvers.jpg');
background-size: cover;
background-position: center;
width: 350px;
height: 400px;
filter: blur(5px);
}
</style>
<div class="background"></div>
This table shows when filter support started for each browser.
 Chrome
|
53.0 | Aug 2016 |
 Firefox
|
35.0 | Jan 2015 |
 IE/Edge
|
13.0 | Nov 2015 |
 Opera
|
40.0 | Sep 2016 |
 Safari
|
9.1 | Mar 2016 |
