CSS Filters: Examples, Use Cases, Caveats

Follow us on LinkedIn for our latest data and tips!

, ,

CSS Filters: Examples, Use Cases, Caveats

Almost any program, app, or editor that allows you to upload pictures or work with images provides some sort of filter capabilities to be applied to the images. Users of InstagramPhotoshop and Snapseed are familiar with utilizing various filters to create eye-catching images. Well curated images can enhance the appeal of your website and increase traffic to the site. However, creating unique images does not have to be a difficult process or require extraneous tools. CSS includes a filter property which allows you to apply a number of fun and interesting filters to your images. The list of filters include grayscale( ), sepia( ), blur( ), saturate( ), brightness( ), contrast( ), opacity( ), drop-shadow( ), invert( ) and hue-rotate( ). Below is an example of each filter and a description of how it works.

This is the original image to which various CSS filters will be applied.


See the Pen GNLKQL by Remi D (@Remi7497) on CodePen.

Grayscale – This filter causes every object in your image to become some shade of gray. Grayscale takes percentage values between 0% and 100% with 0% producing the original image and 100% producing a completely grayscale image. Values in between produce a partially grayscale image. Negative values are not applicable. Note that all filters that take percentage input values, take decimal input values as well.



Sepia – This filter produces a sepia image. Like grayscale it takes percentage values of 0% to 100% as input values. 0% results in the original image and 100% is a completely sepia image.



Saturate- This filter saturates the image. It takes percentage values higher than 100%. Higher values result in a more saturated image. A saturation value of 600% is applied to the image below resulting in a bright and vibrant image.



Blur- This filter blurs the image by the number of pixels specified. The image below is blurred by 2px. A higher pixel value will result in a blurrier image.



Hue-rotate- The hue-rotate filter takes input values of degrees with 0deg being the lowest possible value and 360deg being the highest possible value. The color is set by rotating the image by the specified number of degrees around the color circle. A rotation of 80deg produces the teal toned image below.



Invert- The invert filter inverts the colors of the image. It takes values between 0% and 100%. A value of 0% produces the original image, while a value of 100% produces an entirely inverted image. The image below is inverted 100%.



Drop-shadow- The drop-shadow property creates a colored shadow effect behind the image. The values it takes are the x offset, y offset, blur radius and color. Below the x and y offsets are set to 20px, the blur radius is set to 10px and the color is set to teal. Higher values of the blur radius result in a more blurry shadow while lower values result in a sharper shadow.

filter:drop-shadow(20px 20px 10px teal)


Contrast- The contrast filter makes the difference between the dark parts of the image and light parts of the image more distinct. Contrast takes values between 0% and more than 100%. Setting the value below 100% results in a less contrasted image than the original. The higher the value specified the more contrasted the image. As you can see below, setting a contrast of 200% causes the bright parts of the image to become even brighter while the dark parts of the image become darker than before.



Brightness- The brightness filter also takes values between 0% and more than 100%. A value of 100% results in the original image. Values lower than 100% dims the image while values greater than 100% increases the brightness of the image. The higher the value, the brighter the image. A brightness of 170% is set, resulting in an image so bright that some of the original characteristics become indistinguishable.



Opacity- The opacity filter controls the transparency of the image. It takes values between 0% and 100% with 0% resulting in a wholly transparent image and 100% resulting in the original image.




Filters are a great way to add unique effects to images. Beautiful images make websites more enjoyable and engaging. The CSS filter property provides ten filters that allow you to enhance the aesthetics of your images. Multiple filters can be combined to provide even more interesting effects not shown in this article. All filters can also be animated giving you more options to create compelling content for your website.