Gradient inside circle using fontawsome layers

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>

https://stackoverflow.com/a/12755244/7821865 This answer may help — MattHamer5, Oct 14 '19 at 10:03
Possible duplicate of [CSS3 Transparency + Gradient](https://stackoverflow.com/questions/2293910/css3-transparency-gradient) — Ivar, Oct 14 '19 at 10:12
There are plethora of answers about css gradients already, its a duplicate — Ivar, Oct 14 '19 at 10:13

score 2 · Accepted Answer · answered Oct 14 '19 at 10:18

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>

Gradient inside circle using fontawsome layers

1 Answers1