<div class="toaster">
  <img src="https://s3.amazonaws.com/share.viget.com/images/viget-works.jpg" />
</div>

<p>Toaster brought to you by <a href="https://github.com/una/CSSgram">Una Kravets</a></p>

/**
* Thanks, Una :)
* https://github.com/una/CSSgram/blob/master/source/css/toaster.css
*/
.toaster {
  position: relative;
  filter: contrast(1.5) brightness(.9);
}
.toaster img {
  display: block;
  width: 100%;
  z-index: 1;
}
.toaster::after{
  background: radial-gradient(circle, #804e0f, #3b003b);
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: screen;  /* <- the important part */
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

/* Not important */
p {
  padding: 8px 16px;
}