re: Creating Pixel Art with CSS VIEW POST

re: Damn this is cool as hell. Didn't even know pseudo element could have box shadows.

Yes! Another fun fact for you: the box-shadow property can be animated. Which means you can make moving pixels like this:

But if you apply the box-shadow to a pseudo element & animate it, it actually becomes more performant in the browser. Here’s an article about that:


From what I understand, this article is about creating an illusion of transforming box-shadow by changing it's opacity.
The problem with animating box-shadow is that it triggers repaints on every change.

Good catch! Looks like I wasn't paying close enough attention. That said, if your animation has two states, one way to approach it would be to have two pseudo elements (::before for default state & ::after for 2nd state) with box-shadow applied and alternate the opacity on those.

Or just make a gif. :)

code of conduct - report abuse