Круг с исчезающими краями снизу

body {
  background: #232323;
}

.wrap {
  box-sizing: border-box;
  position: relative;
  width: 50%;
  border: 3px solid #ffd004;
  border-radius: 50%;
}

.wrap::before {
  content:'';
  display:block;
  padding-bottom:100%;
}

.wrap::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: -3px;
  right: -3px;
  height: 100%;
  z-index: 1;
  box-shadow: inset 0px -270px 70px -100px #232323;
}

.title {
  color: #ffd004;
  margin: 0;
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
  background: #232323;
}

.circle {
  position: absolute;
  top:15%;
  left:15%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: #ffd004;
  z-index: 2;
}

<div class="wrap">
  <h2 class="title">Title</h2>
  <div class="circle"></div>
</div>

/* Only for demo */ document.querySelector('div.controls').addEventListener('input',function(ev){let v=ev.target.dataset.var;switch(v){case "cb":case "cl":case "cc":case "ct":document.body.style.setProperty(`--${v}`,`hsl(${ev.target.value}deg 100% 50%)`);break;case "tl":document.body.style.setProperty(`--${v}`,`${75 - ev.target.value}%`);break;case "dc":document.body.style.setProperty(`--${v}`,`${ev.target.value}%`);break;case "tx":document.body.style.setProperty(`--${v}`,`'${ev.target.value}'`);break}})

/* Only for demo */ body{--cb:hsl(260deg 100% 50%);--cl:hsl(50deg 100% 51%);--cc:hsl(50deg 100% 51%);--ct:hsl(50deg 100% 51%);--tl:66%;--dc:60%;--tx:'Title';height:100vh;margin:0;display:flex;justify-content:space-around;align-items:center;background-color:var(--cb)}.controls{display:flex;flex-flow:column wrap;align-items:center;height:149px;width:270px;text-transform:uppercase;text-shadow:-1px -1px 1px #fff,1px -1px 1px #fff,1px 1px 1px #fff,-1px 1px 1px #fff;font:bold 11px/1em Arial}.text,.thick,.color{appearance:none;margin-bottom:.7em;border-radius:1em;outline:none;box-shadow:inset 1px 3px 4px -1px #000}.text{width:46%;margin-top:.7em;padding:2px;border:none;font:bold 11px Arial;text-align:center}.thick{background-image:linear-gradient(to right bottom,#fff calc(50% - 1px),#000 calc(50% + 1px))}.color{background-image:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.thick::-webkit-slider-thumb,.color::-webkit-slider-thumb{border-radius:1em;box-shadow:inset 0 0 1px 2px #000,inset -1px -3px 4px 0 #000,inset 0 0 0 10px #fff}

.circle {
  position: relative;
  height: 160px;
  width: 160px;
  border-radius: 50%;
  background-image: 
    radial-gradient(
      circle, 
      var(--cc, #ffd505) calc(var(--dc, 60%) - 1px), 
      var(--cb, #5500ff) var(--dc, 60%), 
      var(--cb, #5500ff) calc(var(--tl, 66%) - 1px), 
      transparent var(--tl, 66%)), 
    conic-gradient(
      transparent 30deg,
      var(--cl, #ffd505) 31deg,
      transparent 140deg,
      transparent 220deg,
      var(--cl, #ffd505) 329deg,
      transparent 330deg);
}
.circle::after {
  content: var(--tx, 'Title');
  position: absolute;
  top: -.5em;
  left: 0;
  z-index: 1;
  width: 100%;
  margin: 0;
  font: bold 32px/1em serif;
  text-align: center;
  color: var(--ct, #ffd505);
  background-color: var(--cb, #5500ff);
}

<!-- Only for demo --> <div class="controls">цвет&nbsp;фона<input type="range" class="color" data-var="cb" max="360" value="260"> цвет&nbsp;линий<input type="range" class="color" data-var="cl" max="360" value="50"> цвет&nbsp;круга<input type="range" class="color" data-var="cc" max="360" value="50"><span class="text">текст</span>цвет&nbsp;текста<input type="range" class="color" data-var="ct" max="360" value="50"> толщина&nbsp;линий<input type="range" class="thick" data-var="tl" max="75" value="9"> диаметр&nbsp;круга<input type="range" class="thick" data-var="dc" max="75" value="50"><input type="text" class="text" data-var="tx" maxlength="10" value="Title"></div>

<div class="circle"></div>