How to make the gradient border of a circle?

Question

I am stuck with this for a while, so need some helps. Below is my HTML code. So basically I have an arrow image in the "button circle" div. I need to make the background of "button circle" transparent and border color is gradient. I am able to make the background color transparent, but everytime I tried to have a gradient border, it affected my inner background as well. Is there a way to achieve transparent background and gradient border? Please ignore the red line in the image. Thank you!

<div className="button-circle">
  <img className="imp" src="URL" alt="button icon" />
  <span className="inner-circle"></span>
</div>

CSS code

.button-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  border-radius: 100%;
  cursor: pointer;
  background: linear-gradient(rgba(210, 210, 210, 0.5), rgba(255,255,255,.5));
  position: relative;
  border:none;
}

.inner-circle {
    display: inline-block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);;
    position: absolute;
    top:0;
    left:0;
    pointer-events:none;
  
}

The desired image

How to make the gradient border of a circle?

0 Answers0