CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Scorpioniz
Scorpioniz

Reputation: 1449

circle with gradient background border and changing colors with js

I need to make a circular border something like this code snippet / fiddle:

.box {
  width: 250px;
  height: 250px;
  position: relative;
  margin: auto;
  margin: 30px;
  border-radius: 50%;
  background: #fff;
}
.box:after {
  content: '';
  position: absolute;
  top: -15px;
  bottom: -15px;
  right: -15px;
  left: -15px;
  background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
  z-index: -1;
  border-radius: inherit;
}
<div class="box"></div>

except the inner space needs to be transparent and there needs to be a way of changing the border's gradient color.

I can use anything with js/jquery/css/html

Is it possible? If yes, how? Thanks

Upvotes: 0

Views: 60

Answers (1)

Aloso
Aloso

Reputation: 5387

It is possible using a <canvas> element (which is supported in all browsers except for IE 8 and older).

Here are some useful links:

You could also use an SVG element, but that makes the animation much more difficult.

Upvotes: 1

Related Questions