<div class="image"></div>
.image {
  mask-image: url('https://habrastorage.org/webt/ep/fs/pi/epfspiamd5syagxn_q4a0q6n-9m.png');
  mask-size: 100px;
  mask-repeat: no-repeat;
  background: linear-gradient(to right, #04ff00, #ff0000);
  width: 100px;
  height: 100px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.