<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;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.