Gradient inside circle using fontawsome layers - css

Question

I'm trying to achieve the same effect as in the picture attached below using font-awsome layers and css. I can achieve everything but the gradient. Is it possible without using any extra graphics?
My code so far:
<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<span class="fa-layers fa-fw fa-7x">
<i class="far fa-circle progress-circle" ></i>
<i class="far fa-circle progress-circle-small" data-fa-transform="shrink-8" style="color: white;"></i>
<i class="fas fa-sync-alt progress-circle-small" data-fa-transform="shrink-12" style="color: white;"></i>
</span>

Answer 1

You can add it using a pseudo element like below
.custom {
position: relative;
z-index: 0;
}
.custom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
width:1em;
margin:auto;
border-radius: 50%;
background: linear-gradient(to right, blue, red);
transform:scale(0.9);
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<span class="fa-layers fa-fw fa-7x custom">
<i class="far fa-circle progress-circle" ></i>
<i class="far fa-circle progress-circle-small" data-fa-transform="shrink-8" style="color: white;"></i>
<i class="fas fa-sync-alt progress-circle-small" data-fa-transform="shrink-12" style="color: white;"></i>
</span>
<span class="fa-layers fa-fw fa-4x custom">
<i class="far fa-circle progress-circle" ></i>
<i class="far fa-circle progress-circle-small" data-fa-transform="shrink-8" style="color: white;"></i>
<i class="fas fa-sync-alt progress-circle-small" data-fa-transform="shrink-12" style="color: white;"></i>
</span>
<span class="fa-layers fa-fw fa-2x custom">
<i class="far fa-circle progress-circle" ></i>
<i class="far fa-circle progress-circle-small" data-fa-transform="shrink-8" style="color: white;"></i>
<i class="fas fa-sync-alt progress-circle-small" data-fa-transform="shrink-12" style="color: white;"></i>
</span>