CSSだけでテキストをグラデーションにする

ARCHIVES/CREATE IT/WEB DESIGN

CSSだけでテキストにグラデーションを作ってみましょう。

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

サンプル

サンプルを見てみましょう。

See the Pen
テキストデザイン by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

ブルーからピンクになっているのが分かると思います。

HTML

HTMLはこんな感じです。

<body>
  <h1>イロイロデザインラボ</h1>
</body>

要素に直接グラデーションをかけると使いにくいので、実際にはclassを指定したほうが良いです。

CSS

CSSはSCSSを使っています。

h1 {
  padding: 2rem;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  display: inline-block;
  background: linear-gradient(90deg, #56c6f2 0%, #ff7c9c 100%);
  color: transparent;
  -webkit-background-clip: text;
}

display: inline-block;

グラデーションの考え方として、テキストを囲んでいる要素の背景をグラデーションにしたものをマスクするので、<p>や<div>などブロックレベルの要素に直接グラデーションをかけてしまうとテキストの長さと要素の長さに差が出たときに、うまくグラデーションをかけられません。

そのため、テキストを囲っている要素にはdisplay:inline-block;やdisplay:inline;を指定するか、<span>などインライン要素を使いましょう。

今回は<h1>のブロックレベル要素を使っているので、CSSでdisplay:inline-block;を指定しています。

background: linear-gradient;

テキストに適用するグラデーションを指定します。

-webkit-background-clip: text;

テキストを囲っている要素をテキストの形にクリップします。Photoshopのクリッピングマスクみたいな感じですね。

color: transparent;

テキストの色を透明にしています。テキストを透明にしないと背景にかけたグラデーションが透けて見えないので、忘れないようにしましょう。

HOME › KNOWLEDGE › WEB DESIGN › CSSだけでテキストをグラデーションにする