Unsplash image for article hero image

Pokemon evolution in CSS only with box shadow animation

This is an october 2015 project :)

At one point in my dev journey I tried to consolidate my CSS understanding and skill by challenging myself to reproduce visual elements in CSS only.

Here I discovered that with box shadow you can actually make pixel art.

All the box shadow property you see have been created by hand line by line to match the visual representation of the famous fire pokemon starter and his first evolution :D

I’ve added an animation to transition from one state to the other even if the animation feel slightly laggy I really liked the effect!

I hope you’ll enjoy it. :)

Interesting points I’ve practiced on this POC :

  • It was fun as it was the begining when I got into creating small illustrations in CSS only
  • creating those box shadow pixel art line by line was quite fun
Contact