<div class="container">
  <div class="element blur">Blur</div>
  <div class="element brightness">Brightness</div>
  <div class="element contrast">Contrast</div>
  <div class="element grayscale">Grayscale</div>
  <div class="element hue-rotate">Hue Rotate</div>
  <div class="element invert">Invert</div>
  <div class="element opacity">Opacity</div>
  <div class="element saturate">Saturate</div>
  <div class="element sepia">Sepia</div>
  <div class="element drop-shadow">Drop Shadow</div>
</div>
.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 10px;
}

.element {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: Arial, sans-serif;
  color: #fff;
  background: url("https://i.postimg.cc/bJs0ZYPS/DSC-1027.jpg") no-repeat center
    center / cover;
  border: 2px solid #fff;
}

.blur {
  filter: blur(5px);
}

.brightness {
  filter: brightness(1.5);
}

.contrast {
  filter: contrast(200%);
}

.grayscale {
  filter: grayscale(100%);
}

.hue-rotate {
  filter: hue-rotate(90deg);
}

.invert {
  filter: invert(100%);
}

.opacity {
  filter: opacity(50%);
}

.saturate {
  filter: saturate(300%);
}

.sepia {
  filter: sepia(100%);
}

.drop-shadow {
  filter: drop-shadow(10px 10px 5px black);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.