CSS Gradient around a point

Question

I'm wondering if anybody knows, wether its possible to create a gradient like this using CSS only? I know it can be done using canvas but is it possible without?

Answer 1

This is about as close as I could get without staying up all night fiddling with it, but YES, it is possible! [Only with trickery, though, sorry; I don't know of any way to create a legitimate CSS3 gradient ring like that, but the at the least, this is pure HTML/CSS!]

JSFIDDLE

CSS

[I apologize for it being messy]

.tophalf {
position:absolute;
width: 250px; height:125px;
-webkit-border-top-left-radius: 193px;
-webkit-border-top-right-radius: 193px;
-moz-border-radius-topleft: 193px;
-moz-border-radius-topright: 193px;
border-top-left-radius: 193px;
border-top-right-radius: 193px;

background: -moz-linear-gradient(left, #db9771 1%, #cc5f7f 51%, #c30380 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#db9771), color-stop(51%,#cc5f7f), color-stop(100%,#c30380));
background: -webkit-linear-gradient(left, #db9771 1%,#cc5f7f 51%,#c30380 100%);
background: -o-linear-gradient(left, #db9771 1%,#cc5f7f 51%,#c30380 100%);
background: -ms-linear-gradient(left, #db9771 1%,#cc5f7f 51%,#c30380 100%);
background: linear-gradient(to right, #db9771 1%,#cc5f7f 51%,#c30380 100%);
}

.inner {
 position: relative; z-index: 1;
 top: 20px; left: 20px;
 width: 210px; height: 210px;
 background-color: white;
 border-radius: 100%;
}

.bottomhalf {
position:absolute;
top:133px;
width: 250px; height:125px;
-webkit-border-bottom-right-radius: 193px;
-webkit-border-bottom-left-radius: 193px;
-moz-border-radius-bottomright: 193px;
-moz-border-radius-bottomleft: 193px;
border-bottom-right-radius: 193px;
border-bottom-left-radius: 193px;

background: -moz-linear-gradient(left, #db9771 1%, #edc552 51%, #ffec00 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#db9771), color-stop(51%,#edc552), color-stop(100%,#ffec00));
background: -webkit-linear-gradient(left, #db9771 1%,#edc552 51%,#ffec00 100%);
background: -o-linear-gradient(left, #db9771 1%,#edc552 51%,#ffec00 100%);
background: -ms-linear-gradient(left, #db9771 1%,#edc552 51%,#ffec00 100%);
background: linear-gradient(to right, #db9771 1%,#edc552 51%,#ffec00 100%);
}

HTML

<div class='container'>
   <div class='tophalf'></div>
   <div class='inner'></div>
   <div class='bottomhalf'></div>
</div>

How'd I do it?

To be short and simple, I put two half-circles together, giving each half a different gradient, but keeping the starting color on the left side identical for both, ensuring that the 'seam' would only be on one side.

Then, I put a white full circle right in the center of the two half-circles, hiding everything in the middle and successfully creating a gradient ring.

sources?

Edit: Oops! I couldn't have done it without the Gradient Editor.

Answer 2

Just for sake...

fixing that transition part...

#rb::before {
width: 100%;
height: 20%;
margin-top: -10%;
background-color: #cddc39;
}

#rb::after {
width: 20%;
height: 20%;
margin-left: -10%;
margin-top: 70%;
background-color: #ffeb3b;
}

Details here: jsFiddle (https://jsfiddle.net/7kfuzwyc/3/)