CSS3 filter property

Example

Change the color of all images to black and white (100% grayscale):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Try it Yourself »

Definition and use

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

Default Value: none
Inherited: no
Animation support: Yes. For details, please refer toCSS Animations
version: CSS3
JavaScript Syntax: object.style.WebkitFilter="grayscale(100%)" Try it Yourself »

Browser Support

The numbers in the table indicate the first browser version that supports the method.

The -webkit- immediately following the number is the prefix for the specified browser.

Property
filter 18.0 -webkit- 13.0 35.0 6.0 -webkit- 15.0 -webkit-

Note:The non-standard "filter" attribute supported by older Internet Explorer browsers (4.0 to 8.0) has been deprecated. IE8 and lower browsers usually useopacityProperty.

CSS Syntax

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

Tip:Use spaces to separate multiple filters.

Filter Function

Note:Filters usually use percentages (e.g., 75%), but they can also be expressed as decimals (e.g., 0.75).

Filter Description
none Default value, no effect.
blur(px) Applies a Gaussian blur to the image. The "radius" value sets the standard deviation of the Gaussian function, or how many pixels on the screen blend together, so the larger the value, the blurrier the image;

If no value is set, it defaults to 0; this parameter accepts CSS length values, but not percentage values.
brightness(%) Applies a linear multiplication to the image, making it appear brighter or darker. If the value is 0%, the image will be completely black. A value of 100% leaves the image unchanged. Other values correspond to the linear multiplier effect. Values over 100% are also allowed, making the image brighter than before. If no value is set, the default is 1.
contrast(%) Adjusts the contrast of the image. If the value is 0%, the image will be completely black. A value of 100% leaves the image unchanged. Values can exceed 100%, which means lower contrast is applied. If no value is set, the default is 1.
drop-shadow(h-shadow v-shadow blur spread color)

Applies a shadow effect to the image. The shadow is composited under the image, and can be a blurred, offset version of the mask drawn in a specific color. The function accepts values of type <shadow> (defined in CSS3 backgrounds), except that the "inset" keyword is not allowed. This function is very similar to the existing box-shadow property; the difference is that through filters, some browsers provide hardware acceleration for better performance.<shadow>参数如下：

<offset-x> <offset-y> (必须)
These are two <length> values that set the shadow offset.<offset-x>Sets the horizontal distance. Negative values cause the shadow to appear to the left of the element.<offset-y>Sets the vertical distance. Negative values cause the shadow to appear above the element. See<length>Possible units.
如果两个值都是0, the shadow appears directly behind the element (if set <blur-radius> and/or <spread-radius>，会有模糊效果).
<blur-radius> (可选)
This is the third <length> value. The larger the value, the blurrier, and the shadow becomes larger and lighter. Negative values are not allowed. If not set, the default is 0 (the shadow's edges are sharp).
<spread-radius> (可选)
This is the fourth <length> value. Positive values cause the shadow to expand and grow larger; negative values cause the shadow to shrink. If not set, the default is 0 (the shadow will be the same size as the element).
Note: Webkit, as well as some other browsers, do not support the fourth length; if added, it will not be rendered.
 
<color> (可选)
See the possible keywords and tokens for the <color> value. If not set, the color value is based on the browser. In Gecko (Firefox), Presto (Opera), and Trident (Internet Explorer), color will be applied.colorThe value of the property. Additionally, if the color value is omitted, the shadow is transparent in WebKit.
grayscale(%)

Converts the image to grayscale. The value defines the proportion of the conversion. A value of 100% completely converts the image to grayscale; a value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the default value is 0.
hue-rotate(deg)

Applies hue rotation to the image. The "angle" value sets the hue circle angle by which the image will be adjusted. A value of 0deg leaves the image unchanged. If the value is not set, the default is 0deg. Although there is no maximum value, values beyond 360deg are equivalent to going around the circle again.
invert(%)

Inverts the input image. The value defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If the value is not set, the default is 0.
opacity(%)

Transforms the transparency of the image. The value defines the proportion of the conversion. A value of 0% is completely transparent, a value of 100% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect, also equivalent to multiplying the image samples by the amount. If the value is not set, the default is 1. This function is very similar to the existing opacity property; the difference is that through filter, some browsers provide hardware acceleration for improved performance.
saturate(%)

Transforms the saturation of the image. The value defines the proportion of the conversion. A value of 0% is completely unsaturated, a value of 100% leaves the image unchanged. Other values are linear multipliers of the effect. Values above 100% are allowed and give higher saturation. If the value is not set, the default is 1.
sepia(%)

Converts the image to sepia. The value defines the proportion of the conversion. A value of 100% is completely sepia; a value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the default value is 0.
url()

The URL function accepts an XML file that defines an SVG filter, and may include an anchor to specify a specific filter element.

For example:

filter: url(svg-url#element-id)
initial

Set the property to its default value, see:CSS initial keyword
inherit Inherit this property from the parent element, see:CSS inherit keyword
Examples

More Examples

Blur Example

Apply a Gaussian blur effect to the image:

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

Try it Yourself »

Brightness function example

Brighten the image:

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}

Try it Yourself »

Contrast function example

Adjust the contrast of the image:

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

Try it Yourself »

drop-shadow function example

Set a shadow effect on the image:

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

Try it Yourself »

Grayscale function example

Convert the image to a grayscale image:

img {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

Try it Yourself »

hue-rotate() function example

Apply hue rotation to the image:

img {
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}

Try it Yourself »

Invert function example

Invert the input image:

img {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

Try it Yourself »

Opacity function example

Convert the opacity of the image:

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}

Try it Yourself »

Saturate function example

Convert the saturation of the image:

img {
    -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
    filter: saturate(800%);
}

Try it Yourself »

Sepia function example

Convert the image to sepia:

img {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}

Try it Yourself »

Composite Function

Use multiple filters, separating each with spaces.

Note:The order is very important (for example, using grayscale() and then sepia() will produce a fully grayscale image).

img {
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    filter: contrast(200%) brightness(150%);
}

Try it Yourself »

All filter examples

The following examples demonstrate the usage of all filters:

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}

Try it Yourself »

Related Articles

HTML DOM Reference Manual:Style filter Property

other extensions