<div class="container">
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline">
    <p>Original Image</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img1">
    <p>blur(5px)</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img2">
    <p>hue-rotate(150deg)</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img3">
    <p>brightness(150%)</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img4">
    <p>invert(100%)</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img5">
    <p>contrast(200%)</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img6">
    <p>grayscale(100%)</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img7">
    <p>saturate(7)</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img8">
    <p>sepia(100%)</p>
  </div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");

body {
  background-color: #ddd;
  font-family: "Poppins", sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.container div {
  display: flex;
  align-items: center;
  flex-direction: column;
}

img {
  height: 250px;
  width: 250px;
}

p {
  font-size: 20px;
}

#img1 {
  filter: blur(5px);
}

#img2 {
  filter: hue-rotate(150deg);
}

#img3 {
  filter: brightness(150%);
}

#img4 {
  filter: invert(100%);
}

#img5 {
  filter: contrast(200%);
}

#img6 {
  filter: grayscale(100%);
}

#img7 {
  filter: saturate(7);
}

#img8 {
  filter: sepia(100%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.