CSS3 Filter Property
Example
Convert all images to grayscale (100% gray):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
Definition and Usage
The filter property defines visual effects (like blur and saturation) for an element (typically an <img>).
| Default value: | none |
|---|---|
| Inherited: | no |
| --- | --- |
| Animatable: | Yes. See CSS Animations for details |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.WebkitFilter="grayscale(100%)" Try it » |
| --- | --- |
Browser Support
The numbers in the table specify the first browser version that supports the method.
The suffix -webkit- indicates the browser prefix.
| Property | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|
| filter | 18.0 -webkit- | 35.0 | 6.0 -webkit- | 15.0 -webkit- |
Note: Older versions of Internet Explorer (4.0 to 8.0) support a non-standard "filter" property which has been deprecated. IE8 and lower typically use the opacity property.
CSS Syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Tip: Use a space to separate multiple filters.
Filter Functions
Note: Filters usually use percentages (e.g., 75%), but can also be represented by 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 a larger value results in more blur. <br><br>If no value is set, it defaults to 0. This parameter accepts CSS length values but not percentages. |
| brightness(%) | Applies a linear multiplier to the image, making it appear brighter or darker. A value of 0% results in a completely black image. A value of 100% leaves the image unchanged. Other values correspond to linear multiplier effects. Values greater than 100% are allowed, resulting in a brighter image. If no value is set, it defaults to 1. |
| contrast(%) | Adjusts the contrast of the image. A value of 0% results in a completely black image. A value of 100% leaves the image unchanged. Values greater than 100% result in lower contrast. If no value is set, it defaults to 1. |
| drop-shadow(h-shadow v-shadow blur spread color) | Applies a drop shadow effect to the image. The shadow is composited below the image and can have a blur radius, can be spread, and can be drawn in a specific color. The function accepts values of type <shadow> (defined in CSS3 backgrounds), except the "inset" keyword is not allowed. This function is similar to the existing box-shadow property; however, some browsers provide hardware acceleration for better performance through filters. The <shadow> parameters are as follows: <offset-x> <offset-y> (required) These set the shadow offset using two <length> values. <offset-x> sets the horizontal distance; negative values place the shadow to the left. <offset-y> sets the vertical distance; negative values place the shadow above. If both values are 0, the shadow is behind the element (and may appear blurred if <blur-radius> and/or <spread-radius> are set). <blur-radius> (optional) This is the third <length> value. The larger the value, the more blurred the shadow becomes, making it larger and lighter. Negative values are not allowed; if not set, it defaults to 0 (sharp shadow edge). <spread-radius> (optional) This is the fourth <length> value. Positive values expand the shadow, while negative values shrink it. If not set, it defaults to 0 (shadow same size as the element). Note: Webkit and some other browsers do not support the fourth length, and it will not render if added. <color> (optional) See <color> for possible keywords and tags. If not set, the color is based on the browser. In Gecko (Firefox), Presto (Opera), and Trident (Internet Explorer), it uses the color property's value. In WebKit, if the color is omitted, the shadow is transparent. |
| grayscale(%) | Converts the image to grayscale. The value defines the proportion of the conversion. A value of 100% fully converts to grayscale, while 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 a hue rotation to the image. The "angle" value sets the degree of the color wheel adjustment. A value of 0deg leaves the image unchanged. If not set, the default value is 0deg. There is no maximum value; values over 360deg are equivalent to a full rotation. |
| invert(%) | Inverts the input image. The value defines the proportion of the inversion. A value of 100% fully inverts the image. 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. |
| opacity(%) | Adjusts the opacity of the image. The value defines the proportion of the conversion. A value of 0% makes the image fully transparent, while a value of 100% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the default value is 1. This function is similar to the existing opacity property, but some browsers provide hardware acceleration for better performance through filters. |
| saturate(%) | Adjusts the saturation of the image. The value defines the proportion of the conversion. A value of 0% makes the image fully desaturated, while a value of 100% leaves the image unchanged. Other values are linear multipliers of the effect. Values over 100% are allowed and result in higher saturation. If not set, the default value is 1. |
| sepia(%) | Converts the image to sepia. The value defines the proportion of the conversion. A value of 100% fully converts to sepia, while 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 sets an SVG filter and can include an anchor to specify a particular filter element. For example: filter: url(svg-url#element-id) |
| initial | Sets the property to its default value. See CSS initial keyword. |
| inherit | Inherits the property from its parent element. See CSS inherit keyword. |
More Examples
Blur Example
Applying a Gaussian blur effect to an image:
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
Brightness Function Example
Lightening an image:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
Contrast Function Example
Adjusting the contrast of an image:
img {
-webkit-filter: contrast(150%); /* Chrome, Safari, Opera */
filter: contrast(150%);
}
img {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
drop-shadow Function Example
Apply a shadow effect to the image:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
Grayscale Function Example
Convert the image to grayscale:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}
hue-rotate() Function Example
Apply a hue rotation to the image:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
filter: hue-rotate(90deg);
}
Invert Function Example
Invert the input image:
img {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}
Opacity Function Example
Change the image's transparency:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
filter: opacity(30%);
}
Saturate Function Example
Transform the image's saturation:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
filter: saturate(800%);
}
Sepia Function Example
Convert the image to sepia:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}
Composite Function
Use multiple filters, each separated by a space.
Note: The order is very important (e.g., using grayscale() followed by sepia() will result in a fully grayscale image).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}
All Filters Example
The following example demonstrates the use 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 black);
filter: drop-shadow(8px 8px 10px black);
}
drop-shadow(8px 8px 10px green); filter: drop-shadow(8px 8px 10px green);