CSS でフォントの色をグラデーションさせる方法

  • 507単語
  • 3分
  • 15 Aug, 2024

フロントエンド開発では、フォントにグラデーション効果を実現したい場合があります。画像を使用して実現することもできますが、画像を使用するとテキストと一体化しづらく、さらに文字や色を変更するたびに画像を再作成しなければならず、非常に不便です。現在では、CSS の background 属性と -webkit-background-clip を使用して、フォントの色をグラデーションにすることが可能です。

全体フォントカラーのグラデーション

以下は、テキスト全体にグラデーションを適用する実装例です。

1
<!doctype html>
2
<html lang="ja">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>グラデーションフォントカラー</title>
7
<style>
8
.gradient-text {
9
background: linear-gradient(90deg, #ff7a18, #af002d 70%);
10
-webkit-background-clip: text;
11
-webkit-text-fill-color: transparent;
12
}
13
</style>
14
</head>
15
<body>
16
<h1 class="gradient-text">グラデーションフォントカラー</h1>
17
</body>
18
</html>

解説:

  • background: linear-gradient(...):グラデーション背景を設定します。
  • -webkit-background-clip: text:背景を文字の領域にクリップします。
  • -webkit-text-fill-color: transparent:テキストの色を透明にし、背景のグラデーションを表示します。

各文字ごとの独立グラデーション

テキスト全体でなく、各文字に独立したグラデーション効果を持たせたい場合は、以下の方法を使用します。

1
<!doctype html>
2
<html lang="ja">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>各文字グラデーション効果</title>
7
<style>
8
.gradient-letter {
9
display: inline-block;
10
background: linear-gradient(90deg, #ff7a18, #af002d);
11
-webkit-background-clip: text;
12
-webkit-text-fill-color: transparent;
13
font-size: 40px;
14
margin-right: 2px;
15
}
16
</style>
17
</head>
18
<body>
19
<h1>
20
<span class="gradient-letter">グ</span>
21
<span class="gradient-letter">ラ</span>
22
<span class="gradient-letter">デ</span>
23
<span class="gradient-letter">ー</span>
24
<span class="gradient-letter">シ</span>
25
<span class="gradient-letter">ョ</span>
26
<span class="gradient-letter">ン</span>
27
</h1>
28
</body>
29
</html>

解説:

  • display: inline-block;:各文字を独立したブロック要素として表示し、それぞれの背景を適用します。
  • background: linear-gradient(...):各文字に独自のグラデーション背景を設定します。
  • -webkit-background-clip: text;-webkit-text-fill-color: transparent;:背景をテキスト領域にクリップし、テキスト自体を透明にします。

まとめ

CSS は、フォントのグラデーション効果を作成するための柔軟な方法を提供します。全体のグラデーションでも、各文字ごとの独立グラデーションでも、適切な CSS プロパティを使用することで実現できます。この効果により、ウェブページの視覚的な魅力を高め、ユーザーエクスペリエンスを向上させることが可能です。