【CSS】CSSだけで線をグラデーションにする方法（border、背景+疑似要素）

2022.6.28

【CSS】CSSだけで線をグラデーションにする方法（border、背景+疑似要素）

画像を使わずにCSSでグラデーションを実装したい。
backgroundのグラデーションはわかるけど、borderのグラデーションはどうやるの？
ということで、今回は線をグラデーションにする方法を2種類ご紹介します。

border-imageを使った方法

基本はこの3行でOK
.sample {
  border: 2px solid #db6448;
  border-image: linear-gradient(to right, #db6448, #c32d91,#f1ae59);
  border-image-slice:1;
}

実装結果はこんな感じです。

See the Pen <a href="https://codepen.io/Uchaaan/pen/yLKBmgw"> border-imageを使ってグラデーションの線を引く方法</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

背景と疑似要素を使った方法

背景色の上に疑似要素で白背景を乗せる
.sample01 {
  position:relative;
  z-index:1;
  background:linear-gradient(to right, #db6448, #c32d91,#f1ae59);
}

.sample01:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  box-sizing:border-box;
  padding:2px;
  width:100%;
  height:100%;
  background:#fff;
  background-clip:content-box;
}

実装結果はこんな感じです。

See the Pen <a href="https://codepen.io/Uchaaan/pen/mdxbNMq"> 背景色と疑似要素を使ってグラデーションの線を引く方法</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

いかがだったでしょうか。
グラデーションを使用することで、表現の幅が広がりますね。
ボタンや、見出し、装飾などいろいろと使ってみてください。