border-image

border-image プロパティというたった1行のCSSで背景画像とテキスト間にグラデーションのオーバーレイを要素全体に適用できる。

<div class="container overlay">

  <h1>グラデーションのオーバーレイ</h1>

</div>

.overlay {

  border-image: fill 0 linear-gradient(#0003,#000);

}

CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます

coliss.com