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

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

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

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

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

<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の値まとめ

  • 初期値:border-box
  • borderに背景なし:padding-box
  • コンテンツだけに背景:content-box
  • テキストとborderだけに背景:text

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

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

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(軽微なカスタムなら5,500円〜)

ご依頼・ご相談は「お問い合わせ・ご相談」より随時承ります。