CSS filter Attribute

Definition and usage

The filter property defines the visual effects of an element (usually <img>) such as blur and saturation.

See also:

CSS Tutorial:CSS Images

HTML DOM Reference Manual:filter property

Example

Convert all images to black and white (100% gray):

img {
  filter: grayscale(100%);
}

Try it yourself

Tip:More TIY examples can be found at the bottom of the page.

CSS syntax

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

Tip:If multiple filters are to be used, separate each filter with a space (see more examples below the page).

Technical details

Default value: none
Inheritance: No
Animation production: Supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.filter="grayscale(100%)"

Filter function

Note:Use percentage values (e.g., 75%) for filters, and also accept the value as a decimal (e.g., 0.75).

Filter Description
none Default value. Specifies no effect.
blur(px)

Apply a blur effect to the image. Larger values will produce more blur.

If a specified value is used, use 0.
brightness(%)

Adjust the brightness of the image.

  • 0% will make the image completely black.
  • The default value is 100%, representing the original image.
  • Values over 100% will provide a brighter result.
contrast(%)

Adjust the contrast of the image.

  • 0% will make the image completely black.
  • The default value is 100%, representing the original image.
  • Values over 100% will provide a more contrasting result.
drop-shadow(h-shadow v-shadow blur spread color)

Apply a shadow effect to the image.

Possible values:

  • h-shadow - Required. Specifies the pixel value of the horizontal shadow. A negative value will place the shadow on the left side of the image.
  • v-shadow - Required. Specifies the pixel value of the vertical shadow. A negative value will place the shadow above the image.

blur - Optional. This is the third value, which must be in pixels. Adds a blur effect to the shadow. The larger the value, the more blur is created (the shadow will become larger and brighter). Negative values are not allowed. If a value is not specified, 0 will be used (the edge of the shadow will be very sharp).

spread - Optional. This is the fourth value, which must be in pixels. A positive value will cause the shadow to expand and increase, while a negative value will cause the shadow to shrink. If a value is not specified, 0 will be used (the shadow will be the same size as the element).

Note:Chrome, Safari, and Opera, and possibly other browsers, do not support the fourth length; if added, it will not be displayed.

color - Optional. Adds a color to the shadow. If not specified, the color depends on the browser (usually black).

This example creates a red shadow with a horizontal and vertical length of 8px and a blur effect of 10px:

filter: drop-shadow(8px 8px 10px red);

Tip:This filter is similar to the box-shadow attribute.
grayscale(%)

Convert the image to grayscale.

  • 0% (0) is the default value, representing the original image.
  • 100% will make the image completely grayscale (used for black and white images).

Note:Negative values are not allowed.
hue-rotate(deg)

Apply a hue rotation to the image. This value defines the degrees of the color wheel. The default value is 0deg, representing the original image.

Note:The maximum value is 360deg.
invert(%)

Invert the samples in the image.

  • 0% (0) is the default value, representing the original image.
  • 100% will make the image completely inverted.

Note:Negative values are not allowed.
opacity(%)

Set the opacity level of the image. The opacity-level describes the opacity level, where:

  • 0% is completely transparent.
  • 100% (1) is the default value, representing the original image (opaque).

Note:Negative values are not allowed.

Tip:This filter is similar to the opacity attribute.
saturate(%)

Set the saturation of the image.

  • 0% (0) will make the image completely unsaturated.
  • 100% is the default and represents the original image.
  • Values over 100% provide super-saturated results.

Note:Negative values are not allowed.
sepia(%)

Convert the image to sepia.

  • 0% (0) is the default value, representing the original image.
  • 100% will make the image completely sepia.

Note:Negative values are not allowed.
url()

The url() function accepts the location of the XML file that specifies the SVG filter and can include an anchor pointing to a specific filter element. Example:

filter: url(svg-url#element-id)
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

More examples

Blur example

Add blur effect to the image:

img {
  filter: blur(5px);
}

Try it yourself

Blur example 2

Apply blurred background image:

img.background {
  filter: blur(35px);
}

Try it yourself

Brightness example

Adjust the brightness of the image:

img {
  filter: brightness(200%);
}

Try it yourself

Contrast example

Adjust the contrast of the image:

img {
  filter: contrast(200%);
}

Try it yourself

Shadow example

Apply shadow effect to the image:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Try it yourself

Grayscale example

Convert the image to grayscale:

img {
  filter: grayscale(50%);
}

Try it yourself

Hue rotation example

Apply a hue rotation to the image:

img {
  filter: hue-rotate(90deg);
}

Try it yourself

Invert example

Invert the samples in the image:

img {
  filter: invert(100%);
}

Try it yourself

Opacity example

Set the opacity level of the image:

img {
  filter: opacity(30%);
}

Try it yourself

Saturation example

Adjust the saturation of the image:

img {
  filter: saturate(800%);
}

Try it yourself

Sepia example

Convert the image to sepia:

img {
  filter: sepia(100%);
}

Try it yourself

Use multiple filters

To use multiple filters, separate each filter with a space. Note that the order is important (for example, using grayscale() after sepia() will produce a completely gray image):

img {
  filter: contrast(200%) brightness(150%);
}

Try it yourself

All filters

Demonstrate all filter functions:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Numbers with -webkit- indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Note:Older versions of Internet Explorer (4.0 to 8.0) support the deprecated non-standard "filter" attribute. It is mainly used for opacity when supporting IE8 and lower versions.