Filters

CSS filters are a handy 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, change the opacity, brightness, and more! While it’s common to use a filter for image effects, it can be used on any element.

The syntax is as follows:

img {
  filter: *value*;
}

Our filter options are:

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

The value of each filter is specified in the parentheses that are attached to it.

For example:

img {
  filter: opacity(0.5);
}

This makes our image 50% transparent because opacity() ranges from 0 to 1, or we can use a percentage value.

We can also apply multiple filters in a single line of code:

...