CSS实现渐变圆环

我想到的渐变圆环是渐变大圆里面套一个小圆，小圆颜色不同于大圆即可。如下代码

.circle {
    width: 206px;
    height: 206px;
    border-radius: 50%;
    background: linear-gradient(0deg, #36A5ED 0%, #6EEE96 100%);
    position: relative;
}

.content {
    position: absolute;
    left: 13px;
    top: 13px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: #fff;
}

但是现在要求圆环内部透明，这种方法就不太好，直接上修改好的代码了。

.circle {
  position:absolute;
  top: 65px;
  left: -90px;
  width: 206px;
  height: 206px;
  border-radius: 50%;
  background: linear-gradient(0deg, #FFE6C1 0%, #FAE2C1 50%, #FAE7D6 100%);
  -webkit-mask: radial-gradient(transparent, transparent 97px, #000 97px);
  mask: radial-gradient(transparent 77px, #000 77px);
}

实现效果如图

圆环隐藏部分靠父组件overflow的hidden实现，但是这时父组件的定位要设置为relative。