Transforming Images into CSS shadows: A Geeky Challenge with Node.js

I’ve always been interested in the technical side of images, not just the visual part. I’m a photographer and a programmer, and throughout my career, I’ve worked in one field, the other, and even both at the same time. When I talk about the technical side, I’m not just referring to the formation of images at an optical level and their capture, but also to the way they are displayed, the formats, compression, encryption, etc.

However, this is not a heavy article on those topics; in fact, it’s a practical article about an idea that came to me some time ago, while (and here I could say anything, but I’ll tell the truth) I was alone in the bathroom, thinking… :-)

At that moment, I remembered a time when I saw, on one of those research and design pages, someone who had recreated the Mona Lisa in CSS. That impressed me! “Wow, this guy really put in the work!” I thought. So, in that environment, I decided to try it myself. But I have a problem with impatience, so I decided not to spend my time positioning pixel by pixel in different colors. Instead, I decided to invest it in creating a tool in Node.js that, given a 1x1 pixel div, would create a shadow that exactly reproduces the given image. The final result is the same image encoded as a “box-shadow.” It’s like a new format, really! Later, we’ll see how…