[FIXED] How to convert a gif into a shadow?

Issue

I have an elegant 3D animation of a molecule Codeine_3d_transparent.gif.

I wish to produce itsshadow : Codeine_3d_transparent-shadow.gif, which using some html and css I will put bellow the colorful animation.

How can I do it quickly ?

As of now I do this but it's not a shadow XD :

Solution

To be honest, this will probably hurt some devices performance AF (pardon me) - especially so many filters on GIF. Filters should be GPU accelerated though.

Also note, that filters aren't 100% supported across all browsers.

.animationHere,.animationHere:after{
      position:relative;
      width:200px;
      height:200px;
      display:inline-block;
      background:url(https://upload.wikimedia.org/wikipedia/commons/3/3e/Codeine_3d_transparent.gif);
      background-size:100% 100%;
    }
.animationHere:after{
      position:absolute;
      top:3px;
      left:3px;
      content:"";
      z-index:-1;
      filter: brightness(0) blur(1px);
      opacity: .5;
    }
.animationHere.next:after{
      position:absolute;
      top:30px;
      left:0;
      filter: none;
    }

<div class="animationHere"></div>
<div class="animationHere next"></div>

Answered By - Adam K.

Answer Checked By - Senaida (PHPFixing Volunteer)