DEV Community

Cover image for CSS Filters Tutorial
Richard Rembert
Richard Rembert

Posted on • Edited on

CSS Filters Tutorial

#css #beginners #tutorial #writing

CSS Filters are an extremely useful way to apply visual effects to elements.

Tasks that might usually be performed with Photoshop or other photo editing software, can be done right in CSS!

We can use the filter property to add effects such as blur or saturation, or change the opacity or brightness, and more!

Whilst it’s common to use filter for image effects, it can actually be used on any element.

The syntax is:

img {
  filter: *value*;
}
Enter fullscreen mode Exit fullscreen mode

Where value is one of the following:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()
  • url() — for SVG filters

Each filter has a parentheses, this is where we specify its value.

For example:

img {
  filter: opacity(0.5);
}
Enter fullscreen mode Exit fullscreen mode

This will make our image 50% transparent, as opacity() has a range of 0 to 1, or a percentage value.

We can also apply multiple filters in a single line:

img {
  filter: blur(20px) grayscale(20%);
}
Enter fullscreen mode Exit fullscreen mode

Let’s take a look at each filter in detail.

blur()

blur() applies a blur effect to an element.

The value chosen determines the size of the blur radius. The higher the value, the more pixels will blend together, which creates more blur.

img {
  filter: blur(4px);
}
Enter fullscreen mode Exit fullscreen mode

The value can be expressed in px, em or rem units.

opacity()

opacity() applies transparency to the element.

It takes a value from 0 to 1, or a percentage (such as 0.5 for 50%), which determines the image transparency.

0 or 0%, being fully transparent. 1 or 100%, being fully visible.

img {
  filter: opacity(0.5);
}
Enter fullscreen mode Exit fullscreen mode

CSS also has an opacity property. However, browser performance is better with the filter property, so this should be the preferred method.

drop-shadow()

drop-shadow() applies a shadow to an element.

It accepts up to 5 parameters, the first 2 (below) are compulsory:

  • offset-x defines the horizontal offset.
  • offset-y defines the vertical offset. 
img {
  filter: drop-shadow(10px 10px);
}
Enter fullscreen mode Exit fullscreen mode
  • blur-radius(optional), defines a blur radius for the shadow. Defaulting to 0 (no blur). 
img {
  filter: drop-shadow(10px 10px 2px);
}
Enter fullscreen mode Exit fullscreen mode
  • spread-radius(optional), defines a spread radius. In px, rem or em. 
img {
  filter: drop-shadow(10px 10px 2px 5px);
}
Enter fullscreen mode Exit fullscreen mode
  • color (optional), defines the color. 
img {
  filter: drop-shadow(10px 10px 2px 5px red);
}
Enter fullscreen mode Exit fullscreen mode

grayscale()

Converts the element to grayscale.

The value sets the proportion, with 100% being completely grayscale & 0% leaving the element unchanged.

img {
  filter: grayscale(50%);
}
Enter fullscreen mode Exit fullscreen mode

sepia()

Converts the element to sepia.

Again, the value sets the proportion, with 100% being completely sepia & 0% leaving the element unchanged.

img {
  filter: sepia(50%);
}
Enter fullscreen mode Exit fullscreen mode

invert()

Inverts the colors of an element.

The inversion selects the opposite of a color according to the HSL color wheel.

A value of 100% is completely inverted & 0% leaves the element unchanged.

50% will always render grey color, as you end up in the middle of the wheel.

img {
  filter: invert(50%);
}
Enter fullscreen mode Exit fullscreen mode

hue-rotate()

The color wheel is represented in degrees. hue-rotate() lets you rotate the color using a positive or negative rotation.

The function accepts a deg value. With 0deg leaving the input unchanged & 360deg being the max value.

img {
  filter: hue-rotate(90deg);
}
Enter fullscreen mode Exit fullscreen mode

brightness()

brightness() makes an element appear more or less bright.

With a value of 0%, the element will appear completely black. 100% will leave the element unchanged.

img {
  filter: brightness(50%);
}
Enter fullscreen mode Exit fullscreen mode

contrast()

contrast() changes the contrast of the element.

With a value of 0%, the element will appear completely grey. 100% will leave the element unchanged.

img {
  filter: contrast(150%);
}
Enter fullscreen mode Exit fullscreen mode

saturate()

saturate() will alter the saturation of the element.

A value of 0% is completely un-saturated (it will be entirely greyscale). A value of 100% leaves the element unchanged.

img {
  filter: saturate();
}
Enter fullscreen mode Exit fullscreen mode

url()

url() allows you to apply a filter defined in an SVG file.

The parameter will be the location of the file.

img {
  filter: url(filter.svg);
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (0)

Read next

mike_andreuzza profile image

How to create and print an invoice Tailwind CSS

Michael Andreuzza -

witcher_1001 profile image

🌐 SSH Tunneling: Securely Connect to Remote Networks Like a Pro

The Witcher -

terieyenike profile image

Building a Console-Based Calculator in C#

teri -

prince_beec5ccde00b7c6c73 profile image

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Prince -