CSS Reference Property

filter

The filter property is the CSS way of applying filter effects to elements on a web page (mostly images).

Using the CSS filter property you can apply photoshop-like effects to graphics and content. Filter effects include, for example, blur effects, drop shadows, and color shifting and manipulation like saturating/desaturating colors, among others.

CSS filters applied using the filter property are applied to an element right before it is rendered on the screen. The element is kind of passed through a filter before it is drawn on the screen. One way to think of them is like a filter placed on the front of a camera lens. What you’re seeing through the lens is the outside world modified by the effect of the filter.[1] What you see on the screen is the content modified by the filters applied to it.

The filter is applied to an element by passing a filter function to the filter property.

filter: <filter-function> [<filter-function>]* | none
                

Multiple filters can be applied to an element by passing multiple filter functions to the filter property. Functions are space-separated.

The following are the available filter functions in CSS:

In order to apply a filter to an element using a filter function, you pass a value (or amount) to a filter function. If the value you pass is invalid, the function returns none and no filter is applied to the element.

Conceptually, any parts of the element are effected by filter operations. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the filter is applied, and those of its descendants.

Any computed filter value other than none results in the creation of a stacking context, the same way that the opacity property does.

Trivia & Notes

The filter property has no effect on the geometry of an element’s CSS boxes, even though the filter can cause painting outside of an element’s border box.

When you apply multiple filters to an element, the order in which you apply those filters matters and changes the final output of that element.

Some filters may have performance issues that can have an impact on your page, especially filters that do some form of blurring, namely the blur() and drop-shadow() filters. Make sure you check the performance of your sites and applications on mobile and desktop browsers and make the right decisions when using these filters in your projects. You can read more about how these filters work and how they can impact performance in this article.

Official Syntax

  • Syntax:

    filter: <filter-function> [<filter-function>]* | none
  • Initial: none
  • Applies To: graphics and container elements
  • Animatable: yes

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.

blur
Original image on the left; image with blur() filter applied on the right.
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.

brightness
Original image on the left; image with brightness() filter applied on the right.
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.

contrast
Original image on the left; image with contrast() filter applied on the right.
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.

grayscale
Original image on the left; image with grayscale() filter applied on the right.
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.

hue-rotate
Original image on the left; image with hue-rotate() filter applied on the right.
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.

invert
Original image on the left; image with invert() filter applied on the right.
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.

opacity
Original image on the left; image with opacity() filter applied on the right.
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.

saturate
Original image on the left; oversaturated image with saturate() filter applied on the right.
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.

sepia
Original image on the left; image with sepia() filter applied on the right.
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.

box-vs-drop-shadow
The effect of box-shadow on the left and drop-shadow() on the right.

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.

drop-shadow
Original image on the left; image with drop-shadow() filter applied on the right.

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

box-shadow
Original image on the left; image with box-shadow filter applied on the right.
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:

url
SVG filter applied to an element via the CSS filter property. THE SVG filter applies a Gaussian blur to the element.

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 25th, 2014) set on hold and aren’t being worked on by spec editors and/or browser vendors.

Examples

The following example shows how multiple filter functions can be applied to an element:

img {
    filter: brightness(150%) grayscale();
}
.element {
    filter: sepia(100%) contrast(150%);
}
                

Live Demo

The following live demo shows all the filter functions applied to an image and content. Check the browser support table below to see if the demo works in your browser.

View this demo on the Codrops Playground

The following demo is an example of multiple filter effects applied to an image. Try changing the order of the filter functions in the filter property to see how that changes the resulting effect.

View this demo on the Codrops Playground

The following is a fork of a Codepen by Lucas Bebber, that shows a very nice fade-in/fade-out effect created using CSS filters.

View this demo on the Codrops Playground

You can also play with CSS filters in this interactive demo on HTML5Rocks.

Browser Support

CSS Filter Effects

Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.

W3C Working Draft

Supported from the following versions:

Desktop

  • 53
  • 35
  • No
  • 40
  • 9.1

Mobile / Tablet

  • 9.3
  • 56
  • No
  • 57
  • 52

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading

Written by

Last updated December 11, 2016 at 9:29 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.