Filters in CSS

September 22, 2018
CSS and SASS Frontend

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;
    filter: unset

The <function> can be any of these:


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.


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


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.


filter: brightness(<percentage>);

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


filter: contrast(<percentage>);

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


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.


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.


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.


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.


filter: opacity(<percentage>);

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


filter: saturate(<percentage>);

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


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.


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.


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.


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

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

How to Get the most Value from a WordPress Site

From September 20, 2018

There is quite a lot that clients can do to make sure that they get the most value out of their WordPress site – blogging and SEO are just the start.

Read This Article
Next Post

The Weather Sucks: my newest pet project

From September 24, 2018

Not long ago, I got really frustrated with the way the weather app I used worked. I wanted to build something better looking, faster, & easier to use

Read This Article