CSS3 filter (filter) property

Instance

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

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

Try it out . . .

Define and use

The filter property defines the visual effect of an element (usually a sl;img;) (e.g., blur and saturation).

Default: none
Inherited: no
Animation support: Is. For more information, check out CSS Animations
Version: CSS3
JavaScript syntax: object .style. W ebkitFilter="grayscale(100%)" Try it out . . .

Browser support

The numbers in the table support the version number of the first browser for this method.

Immediately after the number - webkit - is the prefix for the specified browser.

Property
filter 18.0 -webkit- Not supported 35.0 6.0 -webkit- 15.0 -webkit-

Note: The non-standard "filter" property supported by the legacy Internet Explorer browser (4.0 to 8.0) has been discarded. IE8 and earlier browsers typically use the opacity property.

CSS syntax 

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

Tip: Use spaces to separate multiple filters.

The Filter function

Note: Filters typically use a percentage (e.g. 75%), and of course can also be represented by a small number (e.g. 0.75).

Filter Describe
none Default, no effect.
blur( px ) Set Gauss blur for the image. The value "radius" sets the standard deviation of the Gauss function, or how many pixels are fused together on the screen, so the larger the value, the more blurred;

If there is no set value, the default is 0;
brightness( % ) Apply a linear multiplication to the picture to make it look brighter or darker. I f the value is 0%, the image will be completely black. I f the value is 100%, the image does not change. T he other values correspond to the linear multiplier effect. V alues above 100% are also expected, and the image will be brighter than the original. If there is no setting, the default is 1.
contrast( % ) Adjust the contrast of the image. I f the value is 0%, the image will be completely black. T he value is 100% and the image remains unchanged. V alues can exceed 100%, meaning lower contrasts are applied. If no value is set, the default is 1.
drop-shadow( h-shadow v-shadow blur spread color )

Set a shadow effect on the image. S hadows are composited under an image and can be blurry, with offset versions of matte diagrams that can be drawn in a specific color. T he function accepts values of the type of "lt;shadow" (defined in the CSS3 background), except for the "inset" keyword. T his function is similar to the existing box-shadow box-shadow properties; <shadow>参数如下：

slt;offset-x> slt;offset-y> (must).
This is the setting of the shadow offset of the two values. . A negative value causes the shadow to appear on the left side of the element. the vertical distance. A negative value causes the shadow to appear above the element. View the possible units.
If both values are 0, the shadow appears just behind the element (if you set the <blur-radius> and/or <spread-radius>， 会有模糊效果 ).
(optional).
This is the third code, and the larger the value, the larger the blur, the larger and lighter the shadow. Negative values are not allowed If not set, the default is 0 (then the boundaries of the shadow are sharp).
(optional).
This is the fourth value. Positive values cause shadows to expand and grow larger, and negative values to shrink shadows. I f not set, the default is 0 (shadows will be the same size as elements).
Note: Webkits, as well as some other browsers, do not support a fourth length and will not render if added.
(optional).
View possible keywords and tags for this value. I f not set, the color value is based on the browser. I n Firefox, Opera, and Trident, the value of the color color property is applied. Also, if the color value is omitted, the shadows in WebKit are transparent.
grayscale( % )

Convert the image to a grayscaness image. T he value defines the scale of the conversion. A value of 100% converts completely to a grayscathed image, with a value of 0% and no change in the image. V alues between 0% and 100% are linear multipliers of the effect. If not set, the default value is 0;

hue-rotate( deg )

Apply a color rotation to the image. T he Angle value sets the angle value of the color ring to which the image will be adjusted. I f the value is 0deg, the image does not change. I f the value is not set, the default value is 0deg. Although there is no maximum value, a value above 360deg is equivalent to another circle.

invert( % )

Reverse the input image. T he value defines the scale of the conversion. 1 00% value is completely reversed. I f the value is 0%, the image does not change. V alues between 0% and 100% are linear multipliers of the effect. If the value is not set, the default value is 0.

opacity( % )

The transparency of the transformed image. T he value defines the scale of the conversion. A value of 0% is completely transparent, and a value of 100% does not change the image. V alues between 0% and 100% are linear multipliers of the effect, which is equivalent to multiplying the image sample by the number. I f the value is not set, the default value is 1. This function is similar to existing opacity properties, except that some browsers provide hardware acceleration through filter to improve performance.

saturate( % )

Convert image saturation. T he value defines the scale of the conversion. A value of 0% is completely unsaturated, and a value of 100% does not change the image. O ther values are linear multipliers of the effect. V alues above 100% are allowed, and there is a higher saturation. If the value is not set, the default value is 1.

sepia( % )

Convert the image to dark brown. T he value defines the scale of the conversion. A value of 100% is completely dark brown, and an image with a value of 0% is unchanged. V alues 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 sets up an SVG filter and can contain an anchor point to specify a specific filter element.

For example: 

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

Set the property to the default, see: CSS initial keyword

inherit Inheriting this property from the parent element can be found in the CSS inherit keyword
CSS3 filter (filter) property

More instances

Fuzzy instance

The picture uses the Gauss Blur effect:

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

Try it out . . .

An instance of the Brightness function

Brighten the picture:

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

Try it out . . .

Contrast function instance

Adjust the contrast of the image:

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

Try it out . . .

Drop-shadow function instance

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 out . . .

Grayscale function instance

Convert an image to a grayscalyst image:

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

Try it out . . .

Hue-rotate() function instance

Apply a color rotation to the image:

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

Try it out . . .

An instance of the Invert function

Inverse the input image:

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

Try it out . . .

Opacity function instance

Transparency in converted images:

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

Try it out . . .

An instance of the Saturate function

Convert image saturation:

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

Try it out . . .

An instance of the Sepia function

Convert an image to dark brown:

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

Try it out . . .

Composite functions

Use multiple filters, each separated by a space.

Note: Order is very important (for example, using grayscale() and then using sepia() will produce a complete grayscale picture).

Img {
-webkit-filter: contrast(200%) b rightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) b rightness(150%);
}

Try it out . . .

All filter instances

The following example demonstrates how to use 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 out . . .

Related articles

HTML DOM Reference Manual: Style filter properties