CSSで文字が光る感じを醸し出す

最終的に文字のグラデーションが光っている感じにしていきます。

文字の背景がぼんやりする設定

shadowをいい感じに入れる。

下段の行が少しだけふんわりしています。

text-shadow:
    0 0 90px rgba(240, 234, 213, 0.5),
    0 0 6px rgba(255, 255, 255, 0.4);

背景にグラデーションを追加する設定

background: linear-gradient(to right, #82ecec, #e06df0);

width: fit-content; を追加してみよう。

テキストでグラデーションする

先ほどのグラデーションの設定をテキストにあてます。（グラデーション、Shadow、Bold）

background: linear-gradient(to right, #82ecec, #e06df0);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

ちょっといまいちなので、文字を大きくしてみました。

最後の行は太文字にしてみました。

なんかいい感じだね。

text-shadow: 0 0 10px rgba(197, 203, 228, 0.4);

Shadowは少なくても良き感じですね。大きい場合、複数ある場合は調整が大変です。

補足

background-clip: text;
-webkit-background-clip: text;

textでClipする設定。Firefoxはprefixが不要だった。Chrome、Edgeは必要。

-webkit-text-fill-color: transparent;

この設定は不要のようだ。Firefox、Chrome、Edgeで不要だった。

color: transparent;

これでカラーを背景から継承する。

謝辞

どちらかの達人のCODEを参考にしました。ありがとう。