CSS Fundamentals: Filters

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!

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

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

The syntax is:

img {
  filter: *value*;
}

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);
}

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%);
}

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);
}

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

opacity()