Adding 3D effect on image with CSS

Question

I'm trying to add a 3D effect with the help of pure CSS where I want to convert this image:

(It's not really an image but it is an SVG form FontAwesome rendered with <fa-icon icon="undo" mask="circle" transform="shrink-9"></fa-icon>)

to this image:

But I'm not able to get the exact effect. I tried a few CSS tricks but I'm stuck with following output:

The SASS I wrote is:

.three-d-effect {
    position: relative;

    &:after {
        content: "";
        position: absolute;
        top: 5%;
        left: 10%;
        width: 80%;
        height: 80%;
        border-radius: 100%;
        filter: blur(1px);
        z-index: 2;
        transform: rotateZ(40deg);
        display: block;
        background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);
    }
}

Is it possible to achieve the desired 3D effect with CSS?

Answer 1

Here is my try where I also created the arrow with CSS:

.box {
  width: 100px;
  height: 100px;
  background: 
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='30' height='30'  fill='lightpink'>  <path d='M6 22 L5.84 22 C30 32 36 36 54 60 C56 62 57 62 56 58 C48 34 46 28 27.16 11.17 C10 0 0 17.83 6 22.17 Z' /></svg>") 65px 10px/30px 30px no-repeat,
   radial-gradient(circle at center,#ff4290 20%,transparent 50%),
   radial-gradient(circle at top right,#ff97c2 15%,#ff5d9f 50%,#c4326e 65%);
  border-radius: 50%;
  position: relative;
  box-shadow:0 0 1px #c4326e;
  filter: brightness(110%);
}

.box:before {
  content: "";
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
  border: 6px solid white;
  border-left-color: transparent;
  border-radius: 50%;
}

.box:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: 
   linear-gradient(#fff, #fff) left/6px 100% no-repeat, 
   linear-gradient(#fff, #fff) bottom/100% 6px no-repeat;
  top: 22px;
  left: 29px;
}

<div class="box">

</div>