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?

a few inset box shadows should do the trick. Something like https://stackoverflow.com/a/27776835/3436942 — jbutler483, Aug 19 '18 at 22:32

score 4 · Answer 1 · answered Aug 14 '18 at 20:24

4

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>

answered Aug 14 '18 at 20:24

Temani Afif

245,468
26
309
415

Sorry for the late reply @Temani. You are really really close. I'll try to tweak your example – Shashank Agrawal Aug 16 '18 at 05:48
Since you have used some kind of SVG here, I need to add more information that that's really not an image but that's an SVG from font-awesome. Will that be of any help? – Shashank Agrawal Aug 16 '18 at 05:52
@ShashankAgrawal if it's an SVG I can probably use it instead of using before/after to create the effect, I can add it as background, maybe it will make the effect more closer – Temani Afif Aug 16 '18 at 08:21
@Temnani I was implementing your answer in my app but what I figured out that you have hardcoded the redo icon and the background color. What I'm trying to implement is a generic CSS class which can apply that 3D like effect to any element (mostly images & icons) – Shashank Agrawal Aug 20 '18 at 12:29
@ShashankAgrawal *generic* isn't possible if you don't provide some constraint. Yes I have hardcoded the whole shape considering your question about the icon and I don't know if it's possible to have a generic effect that can work with any kind of image. We need to at least have some specific requirement like the shape will always be round, with light colors, etc,etc ... but creating a effect that we can apply to everything, it's simply impossible. – Temani Afif Aug 20 '18 at 12:33

Adding 3D effect on image with CSS

1 Answers1