Webサイトで、ユーザーの目を一瞬で惹きつけたいと思ったことはありませんか？
タイトルや重要なテキストをグラデーションで表現すれば、視覚的な魅力をグッと高め、デザイン全体に活気や洗練された印象を与えることができます。
「難しそう……」と思われるかもしれませんが、実は画像を使わずにHTMLとCSSだけで簡単に実装できるんです！
今回は、CSSを使ってテキストをグラデーションにする基本の方法と、すぐに使える具体的なコード例を分かりやすく解説します。
【コピペOK】CSSの記述方法
文字をグラデーションにするには、CSSの「背景を文字の形に切り取る機能」と「文字自体を透明にする機能」を組み合わせます。
以下のコードをコピペするだけで、簡単に実装可能です
p {
font-size: 28px;
font-weight: bold;
/* 好きなグラデーションの色を指定 */
background: linear-gradient(90deg, #58c6ff, #076ad9);
-webkit-background-clip: text; /* 背景を文字の形に切り取る */
background-clip: text;
-webkit-text-fill-color: transparent; /* 文字自体を透明にして背景を透かす */
}↓こんな感じ
グラデーション
↓こんなこともできます。
グラデーション
応用例
基本をマスターしたら、少しコードを足して周りのWebサイトと差別化できるオシャレなエフェクトに挑戦してみましょう。
filter を重ねる
p {
font-size: 28px;
font-weight: bold
background: linear-gradient(90deg, #ff007f, #7f00ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字の背景に、同系色の影を配置する */
filter: drop-shadow(0 0 12px rgba(127, 0, 255, 0.6));
}↓こんな感じ
グラデーション
ホバーエフェクト
p {
/* 要素の横幅を調整 */
width: fit-content;
font-size: 28px;
font-weight: bold;
/* 変化前と変化後の色を1つのグラデーションに入れておきます */
background: linear-gradient(90deg, #58c6ff, #076ad9, #ff3bef) left center / 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-position 0.4s ease;
}
/* ホバー時に背景を右側にスライドさせる */
p:hover {
background-position: right center;
}↓こんな感じ（マウスを近づけてください。）
グラデーション
↓仕組みはこうです。
グラデーション
まとめ
CSSを使ったテキストにグラデーションを設定する方法、いかがでしたか？
これらがすべて、画像いらずでコード数行で実装できるのは本当に便利ですよね。文字が画像のパーツではなく「テキストデータ」のまま残るため、SEO的にも優れているのが大きなメリットです。
ただし、サイト全体で多用しすぎるとゴチャゴチャしてしまい、かえって文章が読みづらくなってしまいます。「ここぞという大きな見出し」や「特に強調したい重要なキーワード」に絞って、効果的に使うのが洗練されたWebデザインに仕上げるコツです。
ぜひ、あなたのブログやWebサイトでも試してみてくださいね！
