filter

Values

blur()

blur(<length>)
                        

The blur() filter function applies a Gaussian blur to the element. The blur() function takes in a parameter—the radius—which defines the value of the standard deviation to the Gaussian function. In other words, it defines how many pixels on the screen blend into each other. The larger the radius the more pixels are going to blend with each other and hence the more blurred the element will be. A value of zero leaves the element unchanged.

The radius passed to the blur() function is a <length> value. All possible length values are accepted except percentages. Negative values are not allowed. If not value is passed, the value defaults to zero ‘0’.

Examples:

.element {
    filter: blur(.15em);
}
.element-2 {
    filter: blur();
}
.element-3 {
    filter: blur(10px);
}
                        

The following shows an image before (left) and after (right) the blur(7px) filter was applied to it.

brightness()

brightness([<number> | <percentage>])
                        

The brightness() filter function makes the image appear more or less bright. It adjusts an image’s colors between completely black (zero brightness) and the original image colors (100% brightness). A value of zero will render the image completely black.

It applies a linear multiplier to input image—as the value of the brightness goes up from zero towards 100% you see more and more of the original image brightening up.

Values beyond 100% will increase the brightness of the image. The higher the brightness value the brighter the image will look. For example, a value of 200% will make the image look twice as bright as it originally is.

The brightness() function can take <number> or <percentage> values.

Negative values are not allowed. A value expressed with a percent sign (as in 56%) can also be expressed as decimal (as in 0.56).

Examples:

.element {
    filter: brightness(0.6);
}
.element-2 {
    filter: brightness(10%);
}
.element-3 {
    filter: brightness(150%);
}
.element-4 {
    filter: brightness(1.5); /* equivalent to 150% */
}
                        

The following shows an image before (left) and after (right) the brightness(200%) filter was applied to it.

contrast()

contrast([<number> | <percentage>])
                        

The contrast() filter function adjusts the contrast of the input. That is, it adjusts the difference between the darkest and lightest parts of the input image.

Just like brightness(), a value of zero will render an image completely black. As the value increases towards 100%, the difference in darkness changes until you see the original image at 100%.

values beyond 100% will increase the difference between light and dark areas even more.

If no value is passed to the contrast() function, it defaults to 100% (the image is not changed).

The contrast() function can take <number> or <percentage> values.

Negative values are not allowed. A value expressed with a percent sign (as in 56%) can also be expressed as decimal (as in 0.56).

Examples:

.element {
    filter: contrast(50%);
}               
.element-2 {
    filter: contrast(.78);
}
.element-3 {
    filter: contrast(0);
}
                        

The following shows an image before (left) and after (right) the contrast(250%) filter was applied to it.

grayscale()

grayscale([<number> | <percentage>])
                        

The grayscale() filter function converts the input image to a shade of gray. The value passed to the function defines the proportion of the conversion. A value of 100% is completely grayscale, so everything will be a shade of grey. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect; i.e. the higher you go from zero to 100% the more the image loses its colors and becomes gray.

Values of amount over 100% are allowed but the browser will clamp the values to 100%.

If no value is passed to the grayscale() function, it defaults to 100%, and the element is rendered in gray.

The grayscale() function can take <number> or <percentage> values.

Negative values are not allowed. A value expressed with a percent sign (as in 56%) can also be expressed as decimal (as in 0.56).

Examples:

.element-1 {
    filter: grayscale(); /* defaults to grayscale(100%) */
}
.element-2 {
    filter: grayscale(1); /* same as grayscale(100%) */
}
.element-3 {
    filter: grayscale(36%);
}
.element-4 {
    filter: grayscale(0.28);
}
                        

The following shows an image before (left) and after (right) the grayscale(100%) filter was applied to it.

hue-rotate()

hue-rotate(<angle>);
                        

The hue-rotate filter function rotates the colors of an image by an angle that is to be passed to the function as a parameter.

A simpler way to understand this would be to imagine a color wheel. Every color on the color wheel has an angle at which it is positioned. If you start at one point (color) at the circle and then move along the circle by a certain angle, you end up at another point with another color.

What the hue-rotate() function does is it selects each color of the input image, rotates it by the angle value passed to it, and then outputs the image with the input colors replaced with new colors. All the colors in the image are shifted in the same way to produce new colors.

A value of zero renders the image unchanged. The maximum angle of rotation is 360 degrees. If the value for the angle is not provided, it defaults to the value 0deg and the image is not changed.

Examples:

.element-1 {
    filter: hue-rotate();
}
.element-2 {
    filter: hue-rotate(127deg);
}
.element-3 {
    filter: hue-rotate(90deg);
}
                        

The following shows an image before (left) and after (right) the hue-rotate(60deg) filter was applied to it.

invert()

invert([<number> | <percentage>])
                        

The invert() filter function inverts the colors in the input image. The value passed to the function defines the proportion of the conversion. A value of 100% is completely inverted—all the colors are flipped so that the image looks like a photo negative (like the ones generated for old non-digital cameras). A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect; i.e. the higher you go from zero to 100% the more the image will look inverted.

Values of amount over 100% are allowed but the browser will clamp the values to 100%.

If no value is passed to the invert() function, it defaults to 100%, and the image is completely inverted.

The invert() function can take <number> or <percentage> values.

Negative values are not allowed. A value expressed with a percent sign (as in 56%) can also be expressed as decimal (as in 0.56).

Examples:

.element-1 {
    filter: invert();
}
.element-2 {
    filter: invert(75%);
}
.element-3 {
    filter: invert(0.4); /* equivalent to invert(40%) */
}
                        

The following shows an image before (left) and after (right) the invert(.8) filter was applied to it.

opacity()

opacity([<number> | <percentage>])
                        

The opacity() filter function allows you to make an input element fully transparent or translucent or fully opaque (which is the default).

The value passed to the function defines how opaque the output will be. So, a value of zero will make the element not opaque and hence it will be fully transparent. A value of 100% will render the element fully opaque. Any value between zero and 100% will render the element translucent. As the value goes from 100% to zero, the input element becomes less and less opaque (you see less of it) until it becomes completely transparent at 0%.

If the element you’re applying the opacity() filter to lies on top of other elements on the page, the elements underneath it will start to show through it as it becomes more transparent.

Values of amount over 100% are allowed but the browser will clamp the values to 100%.

If no value is passed to the opacity() function, it defaults to 100%, and the image is not changed.

The opacity() function can take <number> or <percentage> values.

Negative values are not allowed. A value expressed with a percent sign (as in 56%) can also be expressed as decimal (as in 0.56).

Examples:

.element-1 {
    filter: opacity();
}
.element-2 {
    filter: opacity(50%);
}
.element-3 {
    filter: opacity(.8);
}
                        

The opacity() filter function works the same as the opacity property. However, the CSS opacity property is not hardware-accelerated, but some browsers that implement filters using hardware acceleration will accelerate the filter version of opacity for much better performance.

The following shows an image before (left) and after (right) the opacity(.3) filter was applied to it.

saturate()

saturate([<number> | <percentage>])
                        

The saturate() filter function saturates the colors of the input images making them look more vivid. The value passed to the function defines the proportion of conversion. A value of zero renders the image completely un-saturated. A value of 100% renders the image unchanged. values between 0 and 100% are linear multipliers on the effect; the more the value drops from 100% the less saturated the image becomes. The higher it gets above 100%, the more saturated (super-saturated) the image will be.

If no value is passed to the saturate() function, it defaults to 100%, and the image is not changed.

The saturate() function can take <number> or <percentage> values.

Negative values are not allowed. A value expressed with a percent sign (as in 56%) can also be expressed as decimal (as in 0.56).

Examples:

.element {
    filter: saturate();
}
.element-2 {
    filter: saturate(50%);
}
.element-3 {
    filter: saturate(165%);
}
.element-4 {
    filter: saturate(.34);
}
                        

The following shows an image before (left) and after (right) the saturate(250%) filter was applied to it.

sepia()

sepia([<number> | <percentage>])
                        

The sepia() filter function converts the input image to sepia, giving it a sepia tinge like in old photographs. The value passed to the function defines the proportion of the conversion. A value of 100% makes the colors completely sepia-toned. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect; i.e. the higher you go from zero to 100% the more the image gets that sepia effect.

Values of amount over 100% are allowed but the browser will clamp the values to 100%.

If no value is passed to the sepia() function, it defaults to 100%, and the image is not changed.

The sepia() function can take <number> or <percentage> values.

Negative values are not allowed. A value expressed with a percent sign (as in 56%) can also be expressed as decimal (as in 0.56).

Examples:

.element {
    filter: sepia();
}
.element-2 {
    filter: sepia(50%);
}
.element-3 {
    filter: sepia(165%); /* value is clamped to 100% */
}
.element-4 {
    filter: sepia(.34);
}
                        

The following shows an image before (left) and after (right) the sepia(100%) filter was applied to it.

drop-shadow()

drop-shadow(<length>{2,3} <color>?)
                        

The drop-shadow() filter function applies a drop shadow effect to an element.

A drop shadow is effectively a blurred, offset version of the input image’s alpha mask drawn in a particular color, composited below the image. This means that, unlike box-shadow, the drop-shadow() function applies a drop shadow to an element based on the content inside it, not based on its rectangular shape.

For example, if you have a container with no background and with some text inside it, the text on the transparent background would make up the alpha channel of this element. Using box-shadow, the element would get a drop shadow applied to its entire rectangular shape, while using drop-shadow(), the element will get a drop shadow that resembles the content inside it (its alpha channel), and hence the effect looks more realistic and nicer.

The drop-shadow() function takes a value similar to the value accepted by the box-shadow property, except that the drop-shadow() function’s shadow does not include a spread radius like the box-shadow‘s does, and the inset keyword is also not allowed in the drop-shadow() function.

drop-shadow(<shadow>)
                        

where:

<shadow> = <offset-x> <offset-y> <blur-radius>? <color>?
                        

The first two parameters of the shadow are mandatory, and the third and fourth are optional. However, omitting the <color> value in wbekit browsers will make the drop shadow transparent and therefore have no effect on the element.

The values that compose the shadow passed to the drop-shadow() function have the following meanings:

<offset-x>

Represents the horizonal offset of the shadow. It is a <length> value that specifies the distance by which the shadow is shifted to the left or right of the element. Positive values offset the shadow to the right, and negative values offset the shadow to the left. This value is required.

<offset-y>

Represents the vertical offset of the shadow. It is a <length> value that specifies the distance by which the shadow is shifted to the bottom or top of the element. Positive values offset the shadow downwards, and negative values offset the shadow upwards. This value is required.

<blur-radius>

Also a <length> value. Negative values are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred, and the further out th shadow will extend.

<color>

Specifies the color of the shadow. It is a <color> value. See the <color> entry for a list of possible values.

The color value is optional. If omitted, the browser uses the same color specified by the color property (except in webkit browsers, as mentioned above).

The drop-shadow() function is similar to the box-shadow property, except for the difference in the values of the shadow passed to them, and also in that the box-shadow property is not hardware-accelerated, while some browsers provide hardware acceleration for the drop-shadow() filter for better performance. In addition to the way box-shadow and drop-shadow() differ in the way they are applied to the element.

The following shows an image with an alpha channel (has transparent areas) before (left) and after (right) the drop-shadow(10px 10px 3px rgba(0,0,0,0.3)) filter was applied to it.

The following shows the same image before (left) and after (right) the box-shadow property was applied to it.

url()

The url() filter function takes in a reference to an SVG <filter> element that is to be applied to the element via the CSS filter property.

The reference to the filter is the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. If the referenced <filter> element is part of the same page where the element is, then the url() reference value would be the ID of that filter element.

If the filter references a non-existent object or the referenced object is not a <filter> element, then the whole filter chain is ignored and no filter is applied to the object.

Examples:

.element {
    filter: url(myFilters.xml#effect);
}
.element-2 {
    filter: url(#myFilter);
}
                        

Where #myFilter would refer to an SVG filter that could look like the following:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
  </filter>
</svg>
                        

The above SVG snippet applies a Gaussian blur to an element. The result looks like the following:

Notes

The CSS Filters Specification also defines a custom() filter function, known as a shader: “With Custom Shaders, authors can manipulate the color and shape of a graphical element in granular ways.” CSS Shaders are outside the scope of this entry and are currently (February 25^th, 2014) set on hold and aren’t being worked on by spec editors and/or browser vendors.