<div>
  <h1>Original Image:</h1>
    <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>
<h1>Filtered Images: </h1>
<div class="filter1">
  <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>

<div class="filter2">
  <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>

<div class="filter3">
  <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>
img {
  width: 500px;
  margin-bottom: 20px;
}

.filter1 img {
  filter: grayscale(90%) sepia(13%) saturate(700%); 
}

.filter2 img {
  filter: hue-rotate(-40deg); 
}

.filter3 img {
  filter: contrast(170%) saturate(80%) blur(1px);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.