How can I use circular or conical gradient using CSS?

Question

First of all, this is what I'm trying to reproduce using CSS:

I was wondering, how could I reproduce this gradient that goes from purple to pink around this circle?

Any help is really appreciated! I tried different things and nothing seems to work as intended, gradient backgrounds messed things up, border related stylish also haven't worked very well, I really don't know what to try anymore. Any ideas?

This is my code so far:

HTML & CSS:

#DIV_1,
#DIV_2 {
  bottom: 0px;
  float: left;
  height: 120px;
  left: 0px;
  position: relative;
  right: 0px;
  top: 0px;
  width: 120px;
  perspective-origin: 60px 60px;
  transform-origin: 60px 60px;
  background: rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 50% 50% 50% 50%;
  font: normal normal 400 normal 120px / normal "Times New Roman";
  margin: 0px 12px 12px 0px;
}

#DIV_1:after,
#DIV_2:after {
  bottom: 9.60938px;
  content: ' ';
  display: block;
  height: 100.797px;
  left: 9.6px;
  position: absolute;
  right: 9.60938px;
  top: 9.6px;
  width: 100.797px;
  perspective-origin: 50.3906px 50.3906px;
  transform-origin: 50.3906px 50.3906px;
  background: rgb(245, 245, 245) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 50% 50% 50% 50%;
  font: normal normal 400 normal 120px / normal "Times New Roman";
  transition: all 0.2s ease-in 0s;
}

#SPAN_3 {
  bottom: 0px;
  color: rgb(204, 204, 204);
  display: block;
  height: 120px;
  left: 0px;
  position: absolute;
  right: 0px;
  text-align: center;
  text-decoration: none solid rgb(204, 204, 204);
  top: 0px;
  white-space: nowrap;
  width: 120px;
  z-index: 1;
  column-rule-color: rgb(204, 204, 204);
  perspective-origin: 60px 60px;
  transform-origin: 60px 60px;
  caret-color: rgb(204, 204, 204);
  border: 0px none rgb(204, 204, 204);
  font: normal normal 400 normal 24px / 120px "Times New Roman";
  outline: rgb(204, 204, 204) none 0px;
  transition: all 0.2s ease-out 0s;
}

#DIV_4 {
  bottom: 0px;
  clip: rect(0px 120px 120px 60px);
  height: 120px;
  left: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 120px;
  perspective-origin: 60px 60px;
  transform-origin: 60px 60px;
  font: normal normal 400 normal 120px / normal "Times New Roman";
}

#DIV_5 {
  bottom: 0.015625px;
  clip: rect(0px 60px 120px 0px);
  height: 100.797px;
  left: 0px;
  position: absolute;
  right: 0.015625px;
  top: 0px;
  width: 100.797px;
  perspective-origin: 59.9844px 59.9844px;
  transform: matrix(-0.587785, 0.809017, -0.809017, -0.587785, 0, 0);
  transform-origin: 59.9844px 59.9844px;
  border: 9.59375px solid rgb(77, 181, 60);
  border-radius: 50% 50% 50% 50%;
  font: normal normal 400 normal 120px / normal "Times New Roman";
}

#DIV_6 {
  width: 120px;
  perspective-origin: 60px 0px;
  transform-origin: 60px 0px;
  border: 0px none rgb(77, 181, 60);
  font: normal normal 400 normal 120px / normal "Times New Roman";
}

35%

user_3305454 · Answer

Update: Chrome >68 now supports this!

This was actually being implemented as `conic-gradient`.

This is using Chrome Canary (Nov 2017) with the Experimental Features Flag set to 'enabled', but this works in the regular version as well if you enable it.

Basic example:

div {
  width: 100px;
  height: 100px;
  background: conic-gradient(#F00, #0F0);
}

Note that above example doesn't work on most browsers, but in mine, and hopefully, the future, it will display this:

Now if we build our own small loading widget

.wrapper {
  background-color: #EEE;
  width: 100px;
  height: 100px;
  padding: 50px;
}

.bg {
  position: relative;
  background: conic-gradient(#f00, #0f0);
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
}

.radial-overlay {
  background-color: #EEE;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
}

.left-half {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #EEE;
  clip-path: inset(0px 50px 50px 0px);
}

.right-half {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #EEE;
  clip-path: inset(50px 50px 0px 00px);
  transform: rotate(30deg);
}

Now I know most of you can't see it, but this is how it looks with the flags on:

Now to edit the level, just adjust the transform: rotate(deg) property, you'll have to juggle arround with the left half to cover unwanted parts, but clipping path can be a great solution here.

Now of course this is all fantastic, but still very much not usable in the current browsers, Lea Verou has created a fantastic polyfill for this though, more information about that can be found here

user_8639632 · Answer

I just made a fiddle using 2 linear gradients as background then masked them with a circular stroke and animated it with JQuery:

var circle = $('#myMask circle');
var total = 2*Math.PI*circle.attr('r');
circle.attr('stroke-dasharray',total);
circle.attr('stroke-dashoffset',total);

$('button').click(function() {
  var p = $('#percentage').val() || 0;
  p = Math.max(0,Math.min(100,p))/100;
  $('#percentage-text').text(p*100+'%');
  circle.animate({'stroke-dashoffset': total-total*p}, 1000);
});

How can I use circular or conical gradient using CSS?

2 Answers

Update: Chrome >68 now supports this!

This was actually being implemented as conic-gradient.

This was actually being implemented as `conic-gradient`.