فرض کنید که کد html زیر را نوشته ایم و میخواهیم هر بار، روی عکس زیر یک نوع فیلتر بیندازیم:

<div>
  <h1>Original Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>

<div class="filt1">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>
<br>
<div class="filt2">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>
<br>
<div class="filt3">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>

کد css به شکل زیر می شود:

img {
  display: block;
  max-width: 100%;

}
.filt1{
   filter: grayscale(90%) sepia(13%) saturate(700%); 
}
.filt2{
  filter: hue-rotate(-40deg); 
}
.filt3{
  filter: contrast(170%) saturate(80%) 
}

در اینجا سه نوع فیلتر داریم:

1- Saturated:

 filter: grayscale(90%) sepia(13%) saturate(700%);

2- BnW :

filter: hue-rotate(-40deg); 

3- Sharp:

filter: hue-rotate(-40deg);