DEV Community

Cover image for Adding filters to images using CSS
Rahul
Rahul

Posted on

Adding filters to images using CSS

This latest post is related to CSS in which i will add filter to some images purely using CSS.
Lez get into it.

We'll first see the markup write below and will see the output pics one by one. You'll also get the CodePen link. 😁

Adding filter to images in CSS

  1. Open you code editor and be ready with the pic.
<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>

Enter fullscreen mode Exit fullscreen mode

nd finally the 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%) 
}
Enter fullscreen mode Exit fullscreen mode

**
Lez see the output**

So first basic image was this

  1. Basic image

dog.jpg
This was the real pic we've added filter to this pic.

  1. Saturated

dog1.png

 filter: grayscale(90%) sepia(13%) saturate(700%); 
Enter fullscreen mode Exit fullscreen mode
  1. BnW

dog2.png

  filter: hue-rotate(-40deg); 
Enter fullscreen mode Exit fullscreen mode
  1. Sharp πŸ˜‚

dog3.png

  filter: hue-rotate(-40deg); 
Enter fullscreen mode Exit fullscreen mode

To use CodePen =>




Thanks for seeing this tutorial. Hope you like it.

If you have anything going in your mind comment down below. 😎

Top comments (2)

Collapse
 
mathewthe2 profile image
Mathew Chan

Awesome tip! Gonna keep this in mind.

Collapse
 
rahxuls profile image
Rahul

I don't know why there is numbering problem in pics.