How to create a gradient border using a CSS conic gradient?

Demo:

To create a gradient border using a CSS conic gradient follow the steps below and watch the video tutorial:

Step1.

Add HTML

Create a div element and add your text:

<div class="gradient-border">CSS</br>Gradient Border</div>

Step2.

Add CSS

Style your text and add the gradient border:

.gradient-border {
  padding:25px;
  font-size:30px;
  font-family: tahoma;
  text-align: center;
  line-height: 45px;
  font-weight: 900;
  border-style: solid;
  border-width: 20px;
  border-image: conic-gradient(#4cc9f0 15%, #b5179e, #7209b7, #560bad, #3a0ca3, #4361ee, #4cc9f0) 1;
}

Watch also the video tutorial:

Enjoy coding!

Share this: