CSS グラデーション色のテキスト文字を作る

Appleなどのサイトで使われているグラデーションカラーを使ったテキスト。CSSプロパティのbackground-clipを指定すれば簡単に実現できます。

See the Pen
Text Gradients by kura (@kuranopen)
on CodePen.

HTML

<span class="text-gradient">グラグラグラグラグラグラグラグラデーション</span>

CSS

.text-gradient{
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, rgba(173,188,219,1) 12%, rgba(210,173,219,1) 91%);
    color: transparent;
}

• background-clipすると背景色を文字の中に表示できる
• グラデーションはCSSグラデーションジェネレーターなどで作る

background-clipについて

要素の背景タイプを指定するCSSプロパティ。境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定できる。

background-clip: textを指定するとテキストの中に切り取って表示する。

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選