Create Pixel Art with CSS

Try it here.

You may have seen articles about using the box-shadow property in CSS to make pixel art. The process involves creating an element with the width and height of a pixel, and creating a box-shadow for each pixel. It looks something like this:

As you can imagine, it gets pretty tedious to type it all out manually. So, I automated the process. You can try it out for yourself here.

There are other websites that allow you to convert, but mine is the first one I’ve seen that handles transparency.

The first step is to set up a file upload:

Next we’ll draw the image onto a canvas so that we can iterate over each pixel:

Iterate over each pixel and output a box-shadow for each one in the convertData function:

On line 58 we set the result to a textarea element for the user to copy.

As a bonus, we render a preview so the user can see what the result looks like:

And to make it easy to choose the pixel scale, we make changing scale rerender the preview and textarea: