【HTML】グラデーションで角丸めたい【CSS】

どうも、くまだです。

グラデーションのスタイルをつけつつ、角を丸めたい。なんならテキストまでグラデーションかけたい。そういうわがまま？な要望が実際にWeb制作案件の中であったので、そのやり方です。

グラデーションで角丸める方法

最初にだめだったパターン。

  <div class="box">
      <p class="box__text">グラデーションテキスト</p>
  </div>

p {
  margin: 0;

}

.box {
  padding: 8px 10px;
  border-radius: 4px;
  transition: all .4s;
  display: inline-block;
  border: 2px solid #c21500;
  border-image: linear-gradient(to right, #A42877 0%, #5F319C 100%);
  border-image-slice: 1;
}
.box__text {
  background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 700;
}

一見いけそうだけど、角が丸まらない。border-radiusは、border-imageには効かないみたいです。

.box {
  padding: 2px;
  background: linear-gradient(to right, #A42877 0%, #5F319C 100%);
  border-radius: 4px;
  display: inline-block;

}
.box__text {
  background: #fff;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 4px;
}

バックグラウンドでグラデーションあてて、paddingを線に見た立てています。でも、これだとテキストにグラデーションかかっていません。最初にやったパターンで、テキストにグラデーションの記述をした場合は、以下のコード。

.box__text {
  background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

  font-size: 12px;
  line-height: 1.7;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 4px;
}

そしてこれでもうまくいかないので、最終的にはこうなります。

  <div class="box">
    <div class="box__inner">
      <p class="box__text">グラデーションテキスト</p>
    </div>
  </div>

.box {
  padding: 2px;
  background: linear-gradient(to right, #A42877 0%, #5F319C 100%);
  border-radius: 4px;
  display: inline-block;
}

.box__inner {
  display: block;
  background: #fff;
  padding: 6px 8px;
  border-radius: 4px;

  text-decoration: none;
}

.box__text {
  background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

  font-size: 12px;
  line-height: 1.7;
  font-weight: 700;
}

テキストにグラデーションかけつつ、周りの線にもグラデーションで角丸できました。

なお、テキストをグラデーションにしているのは、下記の部分でグラデーションをクリップしているからです。

  background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

あと今回は割愛しましたが、テキストがグラデーションで周りの線もグラデーションで角丸で、ホバーしたら線もテキストも別なグラデーションに変わるのもそのうち。

ここまで読んでくださりありがとうございました。