CSS background-clip、border-area と text の併用

background-clip の border-area は、背景を枠線の描画領域にクリップしてグラデーション枠を素直に書ける値である。Chrome 150 ではこの値に加え、text との併用も使える。枠線と文字へ同じ背景を載せつつ、塗りつぶし背景は透過のままにできる。

対応ブラウザは Chrome 150 以降に限られる。未対応環境では @supports などで分岐し、従来の border-image や疑似要素による枠線演出へフォールバックする想定になる。

ショートハンドでは次のように書く。border と color を透明にし、background にグラデーションと border-area text を渡す。

.gradient-text-border {
  border: 10px solid #0000;
  color: #0000;
  background: linear-gradient(#90e0ef, #f4a261) border-area text;
}

ロングハンドでは background-clip に 2 値を並べ、background-origin を明示する。ショートハンドで border-area を指定したときは background-origin が border-box になるが、ロングハンドの既定は padding-box のため、省略するとグラデーションの位置がずれる。

.gradient-text-border {
  border: 10px solid #0000;
  color: #0000;
  background-image: linear-gradient(#FF4E50, #40C0CB);
  background-clip: border-area text;
  background-origin: border-box;
}