Box-shadow pixel art is big on CodePen right now. What is this thing I speak of, you ask, askingly? It’s a clever little hack that lets you recreate images using a single HTML element and pure CSS. No data URIs, Flash, scripting, canvas, or SVG.
The Hack
It works by creating a small div with a set width, height, and background color. This becomes your first “pixel”, and also determines the size of every “pixel” to come. You can then set a colored box-shadow on it with an x/y offset and no blur. This is your second “pixel”. Now do this a couple hundred more times and you have pixel art.
It’s very straightforward, if not painfully tedious. Here’s an example (with animation!) I made using Chrono Trigger characters. Check the CSS tab and you’ll see it’s just a little bit of setup and then a ridiculous amount of box-shadow.
See the Pen Chrono Trigger Animated Pixel Art by Will Boyd (@lonekorean) on CodePen.
Pixel Art Generator
Like I said, straightforward and tedious. And naturally, the first thing a programmer thinks when faced with a straightforward and tedious task is “hey, I should automate this”. And so, I created a drag and drop tool to generate all those box shadows for me. Here’s a screenshot of it in action (click to play with the actual tool).
Confession Time
Here’s the thing about this box-shadow pixel art hack: it’s terrible. Just terrible. I cannot think of a single instance when this technique would be useful in a production environment. Seriously, just use an image. If you can’t, embed a data URI. Even as a silly demo, I’m afraid it does damage by misrepresenting CSS. It risks sending beginners the message that cool things in CSS must be insane, tedious hacks.
So I created the pixel art generator out of spite. I thought that if I “solved” this sort of technique by reducing it to a drag and drop interface, it would lose its appeal, the trend would die, and people would move on to other things.
Ironically, my opinion changed while working on this project of spite. I had conceded to myself that I was working on something completely useless, but then I found myself having fun, learning new things, sating my curiosity, and brushing up on my skills. Not so useless! Now I have a different perspective. CodePen is a big playground. And it’s fine to play around, even when the outcome is not at all practical.
But seriously, don’t use this technique on your sites. It’s just awful.