【簡単解説】CSSで丸線にグラデーションを適用する方法

疑似要素を使用する

borderを使わずに疑似要素を使用することで、簡単に丸線にグラデーションを適用することが可能です。

【作成例】

サンプルコード

HTML

  
    <div class="circle">
      <div class="circle__inner">
      </div>
    </div>
  

疑似要素で線を作ります。 「position: absolute」の各距離が線の幅になります。

z-indexを指定して要素を裏側に回し、はみ出た線が表示される仕組みです。

CSS

  
    .circle {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      position: relative;
    }
    .circle::before {
      content: "";
      position: absolute;
      top: -5px;
      right: -5px;
      bottom: -5px;
      left: -5px;
      background: linear-gradient(to right, #3dabff 0%, #4a34ed 100%);
      border-radius: 50%;
      z-index: -1;
    }
    .circle .circle__inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #171717;
    }