JSFiddle - React, Tailwind, and code Playground

by Sergey Kulikov

HTML

<div class="foo">test</div>

CSS

@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  div::after {
    content: "";
    --mask-image: linear-gradient(#000, transparent 40px, transparent calc(100% - 40px), #000);
    mask-image: var(--mask-image);
  }
}