CSS Filters are a pretty cool, powerful tool that can be used to apply a variety of effects. The CSS property provides access to a myriad of functions and are commonly used to adjust the rendering of images and backgrounds.

.filter {
/*Single filter*/
    filter: <function>(<value>);
/*Multiple filters, space separated*/
    filter: <function>(<value>) <function>(<value>);
/*Remove filter*/
    filter: none;
/*Inherit filter*/
    filter: inherit;
/*Use initial value*/
    filter: initial;
/*Unset*/
    filter: unset
}

The <function> can be any of these:

• blur
• brightness
• contrast
• dropshadow
• grayscale
• hue-rotate
• invert
• opacity
• saturate
• sepia
• url (for SVG Filters)
• custom (coming soon?)

Use

To use the property, a value has to be specified. Different functions require different value types. Blur accepts a length. Brightness, contrast, greyscale, invert, opacity, saturate, and sepia all accept a number or percentage. Drop-shadow accepts two arguments: length and color. Hue-rotate accepts an angle.

Examples

I’m dumping this whole list in to one pen, so hold on to your underpants (it’s a quote from my dad – completely normal)

See the Pen CSS Filters! by Nate Northway (@the_Northway) on CodePen.

Function Explanations

blur

filter: blur(<css-length>);

blur applies a gaussian blur to the image. It accepts an input value of radius, a CSS Length (but not percentage) which defines the value of the standard deviation.

brightness

filter: brightness(<percentage>);

brightness applies linear multiplier to the image, making it appear more (or less) bright. Values over 100% are allowed.

contrast

filter: contrast(<percentage>);

contrast adjusts the contrast of the image. Values of over 100% are allowed.

drop-shadow

filter: drop-shadow(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>);

drop-shadow applies a blurred, offset version of the images alpha mask drawn in the specified color.
offset-x/offset-y are two required length values to set the shadow offset. offset-x sets the horizontal distance. Negative values place it to the left of the image. offset-y sets the vertical distance. Negative values place it above the image.
blur-radius is an optional length value which specifies the blur. Negative values are not allowed.

spread-radius is an optional length value which specifies the spread of the shadow. Negative values are allowed. Some browsers do not support this but handle the value as 0, effectively.
color is an optional color value which specifies the color of the value. See the Mozilla Documentation on color for allowed values.

grayscale

filter: grayscale(<value>);

grayscale produces a grayscale image. The value argument is a percentage and defines the proportion of the conversion. A value of 100% would produce a completely grayscale image, while a value of 0% would leave the input unchanged.

hue-rotate

filter: hue-rotate(<angle>);

hue-rotate applies a hue-rotation on the image. The angle argument is a degree and defines the number of degrees around the color circle the input samples will be adjusted. Though there is not a maximum value, values above 360deg will basically wrap back around to 0.

invert

filter: invert(<percentage>);

invert inverts the image. The passed argument defines the proportion of the conversion. A value of 100% would produce a completely inverted image, while a value of 0% would leave the input unchanged.

opacity

filter: opacity(<percentage>);

opacity applies transparency to the image. The value of the passed argument as a percentage adjusts the proportion of the conversion.

saturate

filter: saturate(<percentage>);

saturate applies saturation to the image. The value of the passed argument as a percentage adjusts the proportion of the conversion.

sepia

filter: sepia(<percentage>);

sepia converts the image to sepia. The value of the passed argument as a percentage adjusts the proportion of the conversion. Amounts from 0 to 100 are linear multipliers of the effect.

url (for SVG Filters)

filter: url("file.svg#name");

url applies an SVG filter to the image. It accepts an IRI pointing to a filter, which may be embedded in an external file. To apply an SVG filter from an external file, link the file name, with the ID of the required filter appended to the file name with a hash. To apply an SVG filter from the same HTML source file, pass the ID of the filter as the argument with a hash prepended.

Notes

Combining filters is totally possible, but remember that effects stack. So applying grayscale() after sepia() will result in a grayscaled image.
Even though filter can paint outside the element’s box, it has no effect on the geometry of the element’s box-model. This includes the content, background, borders, text-decoration, child elements, outline, and scrolling mechanisms.

Usage

Aside from just using the filter property, filters can also be used in @keyframes animations.

See the Pen Animated Filters by Nate Northway (@the_Northway) on CodePen.

A practical application of the filter property might be hover effects. Consider an image hosting site which has actionable overlays to share an image.

See the Pen Practical Filter Application by Nate Northway (@the_Northway) on CodePen.

Performance

Not all filters are created or rendered equally. Filters that use blur (blur and drop-shadow) take a little extra processing power. When a blur is used, each pixel around a target needs to be looked at to determine the color of the target. When the spread of a blur is increased, the amount of pixels that need to be considered is also increased. So a single target pixel needs to have its nine neighbors considered in determining its color in a 1px blur. But a 2px blur needs to look at 4 times as many pixels to compute a color. So it’s 4 times as slow. With modern browsers, its possible to use hardware acceleration, but shouldn’t be relied upon. Make sure you’re testing in mobile browsers to ensure that the effect on performance is small.

Browser Support

Most modern browsers show good support for filters. Of course, IE doesn’t and Edge only has partial support (meaning no URL…). IE Mobile and Opera Mini also don’t support filters. See the full support chart at Can I Use….

Additional Information

I got a lot of information through this great CSS-Tricks article. I also sourced a bunch of info from the MDN docs page on filters.

No Comments...yet