<div class="duotone-image">
    <img src="https://unsplash.com/photos/AO21yM7oGDA/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MzZ8fHxlbnwwfHx8fDE2OTM4MzgwNDF8&force=true" alt="Portrait">
  </div>
.duotone-image {
  position: relative;
  display: inline-block;
}

.duotone-image img {
  width: 400px;
  height: auto;
  vertical-align: middle;
}

.duotone-image::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #FF7F00, #00BFFF);
  mix-blend-mode: color;
  opacity: 0.6;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.