Skip to main content

Working with CSS Filters

CSS Filters allow you to apply visual effects to your web pages, such as blurring, brightness adjustment, and grayscale conversion. In this tutorial, we'll explore the available filter functions, how to use them, and how to chain multiple filters together.

Available Filter Functions​

There are several built-in filter functions you can use:

  • blur(): Apply a blur effect.
  • brightness(): Adjust the brightness.
  • contrast(): Adjust the contrast.
  • grayscale(): Convert to grayscale.
  • hue-rotate(): Rotate the hue.
  • invert(): Invert the colors.
  • opacity(): Adjust the opacity.
  • saturate(): Adjust the saturation.
  • sepia(): Apply a sepia tone.

Using CSS Filters​

To apply a filter, use the filter property and specify the desired function with its parameters.

Example:

CSS
img {
  filter: grayscale(100%);
}

Chaining Multiple Filters​

You can chain multiple filters together by separating them with a space.

Example:

CSS
img {
  filter: grayscale(100%) contrast(150%);
}

Resetting Filters​

To reset the filters applied to an element, use the none value.

Example:

CSS
img:hover {
  filter: none;
}

Conclusion​

In this tutorial, we learned about CSS Filters, the available filter functions, how to use them, and how to chain multiple filters together. By utilizing CSS Filters, you can create visually engaging web pages and enhance user experience.