如何使用CSS使用圆形或圆锥形渐变？

首先,这是我正在尝试使用CSS重现的内容:

我想知道,我怎么能重现这个圆圈周围从紫色到粉红色的渐变？

任何帮助真的很感激!我尝试了不同的东西,似乎没有任何工作按预期,渐变背景搞砸了,边框相关的时尚也没有很好地工作,我真的不知道该怎么办了.有任何想法吗？

到目前为止这是我的代码:

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%
    

      

      
      

      
    
  

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