CSSのテキスト行の終わりをフェードアウトすることはできますか？

Question

私はCSSのテキスト行をフェードアウトする方法のさまざまな例を見てきました。ただし、これらのすべてに背景色に一致するグラデーションオーバーレイが必要です。通常は、背景が白い場合など、白い場合があります。

しかし、例えば、ある色のグラデーションベースの背景がある場合、フェードはこの方法では機能しません。私はこの希望の外観を達成するための他の方法を見つけることができません。

勾配法で透明になるためにテキストをフェードアウトする方法はありませんか？

Answer 1

あなたの探しているものは何ですか？

div { 
 
    background: linear-gradient(to bottom right, red, yellow); 
 
} 
 
h2 { 
 
    background-image: linear-gradient(90deg,#000000 0%,rgba(0,0,0,0)); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    position:relative; 
 
    display:inline-block; 
 
    font-size: 50px; 
 
}

<div> 
 
    <h2> 
 
    test test test test test 
 
    </h2> 
 
</div>