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: textを指定するとテキストの中に切り取って表示する。

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。