CSS filter Property

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.

Example

#

An image with filter set to saturate(7).

Sunflowers by Van Gogh
<style>
  .saturate {
    filter: saturate(7);
  }
</style>

<img class="saturate" src="/img/css/sunflowers.jpg"
     alt="Sunflowers by Van Gogh">

Syntax

filter: none | blur() | brightness() | contrast() | 
        drop-shadow() | grayscale() | hue-rotate() | 
        invert() | opacity() | saturate() |
        sepia() | url();

Values

#

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.

More Examples

Click the buttons to see the different filter values and their effects.

Sunflowers by Van Gogh
<style>
  .filter-example {
    filter: invert(100%);
  }
</style>

<img class="filter-example" src="/img/css/sunflowers.jpg"
     alt="Sunflowers by Van Gogh">

Did you know?

Did you know?

Create background effects with filter

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>

Browser support

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

You may also like

Guides