Filters

This lesson discusses the filter property in CSS and how it can be used to apply visual effects to elements on a web page.

Filters

The filter property is used to apply visual effects to an element. The filter property can be set to blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, drop-shadow, or a combination of these values.

Blur
Brightness
Contrast
Grayscale
Hue Rotate
Invert
Saturate
Sepia
Drop Shadow
<div class="container">
  <div class="item blur">Blur</div>
  <div class="item brightness">Brightness</div>
  <div class="item contrast">Contrast</div>
  <div class="item grayscale">Grayscale</div>
  <div class="item hue-rotate">Hue Rotate</div>
  <div class="item invert">Invert</div>
  <div class="item saturate">Saturate</div>
  <div class="item sepia">Sepia</div>
  <div class="item drop-shadow">Drop Shadow</div>
</div>

The code above shows an example of the filter property. In this example, different visual effects are applied to the <div> elements using the filter property.

More About Filters

You can learn more about CSS filters by visiting the following links:

Code Editor