Categories: CSSHTML

【コピペでOK！】CSSでテキストの文字色をグラデーションに！

コードは以下です。

See the Pen gradation_text by Naoto Yoshikawa (@nanaironanaoto) on CodePen.

あらためてコードを解説しますと、

肝心なのは、テキストのcolorスタイルではグラデーションをかけられないので、
inlineにした上で、ボックスの背景をグラデーションにし、そのボックスを-webkit-background-clipおよび-webkit-text-fill-colorで、テキストのマスクを行い、

結果的にテキストの型にグラデーションの背景を見せています。


  display: inline-block;
  background: rgb(126,237,255);
  background: linear-gradient(93deg, rgba(126,237,255,0.8) 0%, rgba(126,237,255,1) 9%, rgba(255,86,246,1) 35%, rgba(152,231,246,0.6) 85%, rgba(240,255,86,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

グラデーションの色指定は”background: linear-gradient”から始まる、とても長い構文で指定していますが、この指定の書き方を暗記していなくてもよいです。

こちらのようなWebサービスで、スライダーで自分でグラデーションを作成して、出力されたCSSコードをコピーして貼り付ければOKです。

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

ナナイロ

ECサイト制作に強いフロントエンドエンジニア。Web関連のお役立ち技術情報を発信しています。 2025年の最新のAI生成コーディングのコースをUdemyに公開いたしました。爆速でコードを書きたい方は必見です！！さらに、今年(2025年)からVoicyのパーソナリティに挑戦し始めました！ラジオでWebエンジニアの生の声をお届けしています。