<div class="rings">
  <div class="ring">
    <i style="--i: 1;"></i>
    <i style="--i: 2;"></i>
    <i style="--i: 3;"></i>
    <i style="--i: 4;"></i>
    <i style="--i: 5;"></i>
    <i style="--i: 6;"></i>
    <i style="--i: 7;"></i>
    <i style="--i: 8;"></i>
    <i style="--i: 9;"></i>
    <i style="--i: 10;"></i>
    <i style="--i: 11;"></i>
    <i style="--i: 12;"></i>
    <i style="--i: 13;"></i>
    <i style="--i: 14;"></i>
    <i style="--i: 15;"></i>
    <i style="--i: 16;"></i>
  </div>
</div>

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
  background-image: radial-gradient(circle, #eee, #bbb 500px);
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;
  
  * {
    transform-style: preserve-3d;
  }
}

.rings {
  position: relative;
}

.ring {
  position: absolute;
  --ringColor: #0081c8;
  
  i {
    --translateZ: calc(var(--i) * 2px);
    --light: calc(var(--i) / 16);
    --layerColor: rgb(from var(--ringColor) calc(r * var(--light)) calc(g * var(--light)) calc(b * var(--light)));
   
    position: absolute;
    inset: -100px;
    border: 16px var(--layerColor) solid;
    border-radius: 50%;
    transform: rotateY(-45deg) translateZ(var(--translateZ));
  }
}