JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div class="wrap">
  <div id="target"></div>
</div>

<svg width="100%" height="100%" viewPort="100 100" preserveAspectRatio="xMaxYMax meet">
  <linearGradient id="linear-gradient" x1="0" y1="0" x2="0" y2="100%">
    <stop offset="0" stop-color="#000" />
    <stop offset="100%" stop-color="#fff" />
  </linearGradient>
  <defs>
    <mask id="myMask" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <rect x="0" y="0" width="100" height="100" fill="#fff" />
      <rect x="0" y="0" width="100" height="6" fill="url(#linear-gradient)" />
      <rect x="0" y="0" width="100" height="6" fill="url(#linear-gradient)" transform="scale(1, -1) translate(0, -100)" />
    </mask>
  </defs>
</svg>

CSS

body {
  background: #ff0;
}

.wrap {
  display: inline-block;
  border: 1px solid #f00;
}

#target {
  height: 300px;
  width: 200px;
  background: #000; //url("https://www.planwallpaper.com/static/images/518164-backgrounds.jpg");
  mask: url(#myMask);
}