<div class="background">
  <div class="color"></div>
  <div class="color-burn"></div>
  <div class="color-dodge"></div>
  <div class="darken"></div>
  <div class="difference"></div>
  <div class="exclusion"></div>
  <div class="hard-light"></div>
  <div class="hue"></div>
  <div class="lighten"></div>
  <div class="luminosity"></div>
  <div class="multiply"></div>
  <div class="normal"></div>
  <div class="overlay"></div>
  <div class="saturation"></div>
  <div class="screen"></div>
  <div class="soft-light"></div>
</div>

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;

  .background {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 450px;
    height: 465px;

    div {
      position: relative;
      background-image:
        linear-gradient(to right, #ef4578 0%, #ffb545 100%),
        url("https://cdn.sanity.io/images/0ugmrqfk/production/4d0a819af538784bfb97a03000170a4b03d2c01b-5760x3840.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      width: 100px;
      height: 100px;
      border-radius: 5px;
      box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
      margin-bottom: 30px;
      
      &:after {
        content: attr(class);
        position: absolute;
        bottom: -25px;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
      }
    }

    .color {
      background-blend-mode: color;
    }

    .color-burn {
      background-blend-mode: color-burn;
    }

    .color-dodge {
      background-blend-mode: color-dodge;
    }

    .darken {
      background-blend-mode: darken;
    }

    .difference {
      background-blend-mode: darken;
    }

    .exclusion {
      background-blend-mode: exclusion;
    }

    .hard-light {
      background-blend-mode: hard-light;
    }

    .hue {
      background-blend-mode: hue;
    }

    .lighten {
      background-blend-mode: lighten;
    }

    .luminosity {
      background-blend-mode: luminosity;
    }

    .multiply {
      background-blend-mode: multiply;
    }

    .normal {
      background-blend-mode: normal;
    }

    .overlay {
      background-blend-mode: overlay;
    }

    .saturation {
      background-blend-mode: saturation;
    }

    .screen {
      background-blend-mode: screen;
    }

    .soft-light {
      background-blend-mode: soft-light;
    }
  }
}