Style filter attribute

Definition and usage

filter Properties add visual effects to images (such as blur and saturation).

See also:

CSS Reference Manual:filter attribute

Example

Change the image color to black and white (100% grayscale):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Try it yourself

Syntax

Return the filter attribute:

object.style.filter

Set the filter attribute:

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Filter function

Comment:A filter using percentage values (such as 75%) also accepts decimal values (i.e., 0.75).

Filter Description
none Specify no effect.
blur(px)

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

If not specified, a value of 0 will be used.
brightness(%)

Adjust the image brightness.

0% will make the image completely black.

100% (1) is the default value, representing the original image.

Values over 100% will provide a brighter result.
contrast(%)

Adjust the image contrast.

0% will make the image completely black.

100% (1) is the default value, representing the original image.

Values over 100% will provide a lower contrast result.
drop-shadow(h-shadow v-shadow blur spread color)

Apply a projection effect to the image.

Possible values:

h-shadow - Required. Specify the pixel value for the horizontal shadow. A negative value will place the shadow to the left of the image.

v-shadow - Required. Specify the pixel value for the vertical shadow. A negative value will place the shadow above the image.

blur - Optional. The third value, must be in pixels. Add a blur effect to the shadow. Larger values will produce more blur (the shadow becomes larger and brighter). Negative values are not allowed. If not specified, the value will be 0 (the edge of the shadow will be sharp).

spread - Optional. The fourth value, must be in pixels. A positive value will cause the shadow to expand and become larger, while a negative value will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

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

color: Optional. Add color to the shadow. If not specified, the color depends on the browser (usually black).

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 (for black and white images).

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

Apply a hue rotation to the image. This value defines the degrees the image samples will be adjusted around the color wheel.

0deg is the default value, representing the original image.

Comment:The maximum value is 360 degrees.
invert(%)

Invert the samples in the image.

0% (0) is the default value, representing the original image.

100% will make the image completely inverted.

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

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

0% is completely transparent.

100% (1) is the default value, representing the original image (no opacity).

Comment:Negative values are not allowed.

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

Adjust the image saturation.

0% (0) will make the image completely desaturated.

100% is the default value, representing the original image.

Values over 100% will provide oversaturated results.

Comment: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.

Comment:Negative values are not allowed.

Technical Details

CSS Version: CSS3

Browser Support

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0