I am running one circle progress bar where in bottom one i need to show little shadow. I am using SVG element where i tried to use linear gradient with light and dark color but it is not working as expected.

Below is the sample image where the same i need also.

I tried linear gradient with two color light and dark where dark has to be set as a shadow but it is not working as per the attached image. Below is the sample code, Where i have tried to reproduce the same.

Below is the piece of code i used there.

 <svg class="progress-bar" width="300" height="300" data-degree="80" viewBox="0 0 100 110" fill="none">
  <defs>
    <linearGradient id="lg1" x1="0.7" gradientTransform="rotate(45)">
      <stop offset="0%" stop-color="#eee" />
      <stop offset="100%" stop-color="#ddd" />
    </linearGradient>
    <mask id="m1">
      <circle transform="rotate(135)" stroke="white"
        stroke-width="12" r="44" stroke-dasharray="270 360"
        pathLength="360"/>
    </mask>
    <radialGradient id="rg1">
      <stop offset="0%" stop-color="#aaa" />
      <stop offset="40%" stop-color="#ccc" />
      <stop offset="90%" stop-color="white" />
    </radialGradient>
     <linearGradient id="b1" x1="0.20" y1="12" x2="0.5" y2="2">
            <stop startOffset="0%" stopColor="#E8EBEF" stopOpacity="3" />
            <stop offset="10%" stopColor="#FFFFFF" />
            <stop offset="100%" stopColor="#E8EBEF" />
          </linearGradient>
  </defs>
  <ellipse cx="50" cy="102" rx="40" ry="8" fill="url(#rg1)" />
  <g transform="translate(50 50)">
    <circle stroke="#eee" stroke-width="12" r="44"/>
    <g mask="url(#m1)">
      <rect transform="translate(-50 -50)" width="100" height="100"
        fill="url(#lg1)" />
      <circle stroke="url(#b1)" stroke-width="12" r="44"
        stroke-dasharray=".5 4.5" pathLength="360" pathLength="360"/>
      <circle stroke="#bbb" stroke-width="12" r="44"/>
    </g>
    <g transform="rotate(135)">
      <circle id="c1" stroke="#0b60e9" stroke-width="8" r="42"
        stroke-dasharray="100 133" pathLength="133.5"/>
    </g>
    <line transform="rotate(45) translate(38 0)" stroke="#aaa"
      stroke-width="1" x2="12" />
    <line transform="rotate(135) translate(38 0)" stroke="#aaa"
      stroke-width="1" x2="12" />
    <g id="g1" transform="rotate(216)">
      <line transform="rotate(-225) translate(38 0)" stroke="#000"
        stroke-width=".5" x2="12" />
      <polygon transform="rotate(-225) translate(36 0)"
        points="0,-4.5 0,4.5 5,0" fill="#000"/>
    </g>
    <text id="t1" font-family="sans-serif" font-size="20" font-weight="400"
      text-anchor="middle" dominant-baseline="middle" fill="#0b60e9">75</text>
    <text id="t2" y="10" font-family="sans-serif" font-size="9"
      font-weight="400" text-anchor="start" dominant-baseline="hanging" fill="#000">80</text>
  </g>
</svg>

Also here is the fidle link : Fidle link FYR.

Need help.