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 プロパティを使用することで実現できます。この効果により、ウェブページの視覚的な魅力を高め、ユーザーエクスペリエンスを向上させることが可能です。