グラデーションテキストが作れるbackground-clip

背景をどの領域まで表示させるのかを指定する「background-clip」というプロパティがあります。

background-originプロパティとよく似ていますが、background-originがbackground-imageについて作用するのと異なり、background-clipはbackground-color・ background-image両方に作用します。

background-clipには４種類の値を設定できます。

境界線や余白に対する背景表示範囲を考慮できる

<div>
  <p>吾輩は猫である</p>
</div>

<style>
div {
  padding: 30px ;
  background: bisque ;
  border: 10px solid rgba(0, 0, 0, 0.3) ;
}
</style>

たとえばこんなコードがあったとすると、通常、背景色は余白も含めた要素全体に表示されます。

borderが破線なので分かると思いますが、borderの下にも背景領域は広がっています。

ここで、「background-clip: padding-box」を指定してやると、borderは背景対象外となり、borderを除いた要素に背景が指定されます。

borderの背景色がなくなったのが分かると思います。

つづいて値に content-box を指定するとpaddingの余白も対象外となり、今度はコンテンツ部分だけが背景の対象となります。

さらにさらに、値に text を指定し、テキスト部分を透過させることで、テキスト部分のみに背景が適用され、あとは背景なしとなります。

div{
  background-clip: text;
}
p{
 color: transparent;
}

プレビューを見て気付きましたが、background-clip: text; を指定したときborderに背景が適用されていますね。初めて知りました。(ブラウザによって異なる模様)

背景が単色ではなくグラデーションだと、透過させたテキストもグラデーションにできます。

background-attachment:fixed;が指定されている場合は、background-clip:text;を使用できませんので注意。
端折ってましたが、background-clipの初期値は「border-box」です。

background-clipの値まとめ

下はbackground-clipを利用したサンプルです。

See the Pen
background-clip css by Takashi Abe (@TakeshiAbe)
on CodePen.