JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

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

<svg width="100%" height="100">
  <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" 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: 100px;
  width: 300px;
  background: #00f; //url("https://www.planwallpaper.com/static/images/518164-backgrounds.jpg");
  -webkit-mask:
  linear-gradient(transparent, rgba(0, 0, 0, 1.0)) 0 0 / 100% 6px no-repeat,
  linear-gradient(rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 1.0)) 0 6px / 100% calc(100% - 12px) no-repeat,
  linear-gradient(rgba(0, 0, 0, 1.0), transparent) 0 100% / 100% 6px no-repeat;
  mask: url(#myMask);
}