CSSで背景色を文字で切り抜き、文字色をグラデーションさせる方法

css

CSSで文字をグラデーションさせたい場合は、背景色にグラデーションを設定して、上においた文字の部分のみ透過させる方法で、なめらかなグラデーション文字色を設定することができます。

<div><p>などブロック要素の背景色を透過する場合、グラデーションが横幅いっぱいに設定されるので、文字が少ない場合はグラデーションがあまり感じられない場合があります。

<span>などのインライン要素に背景グラデーションを設定すれば文字の幅でグラデーションが設定されるので、文字の最初から最後でピッタリグラデーションが設定されます。

見出しなどの繰り返しや、決まった位置で利用する場合、グラデーションの位置が揃ったほうがきれいなので、ブロック要素で利用したほうが良いかもしれません。

また、複数行に文字がまたがる場合の見え方も考慮しましょう。

↓グラデーション背景

↓ブロック要素に設定（背景の幅でグラデーション）

途中で切れる場合があるけど、グラデーションが揃う。

ABCDEFGHIJKLMNOP

ABCDEFGHIJKL

ABCDEFGHIJ

ABCDEFGH

ABCDE

↓インライン要素に設定（文字の幅でピッタリグラデーション）

ABCDEFGHIJKLMNOP

ABCDEFGHIJKL

ABCDEFGHIJ

ABCDEFGH

ABCDE

<style>
.grad-text{
    font-size:30px;
    font-weight:bold;
    color: #FF8C00;
    background: rgb(63,94,251);
    background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(79,178,127,1) 53%, rgba(252,70,107,1) 100%);
    -webkit-background-clip: text;
    background-clip:text;
    -webkit-text-fill-color: transparent;
    text-fill-color:transparent;
}
</style>
<p class="my-grad-text">ABCDEFGHIJKLMNOPQRSTU</p>
<p><span class="my-grad-text">ABCDEFGHIJKLMNOPQRSTU</span></p>