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:

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Flask 2.0 !!!

How to Write Better Tickets

From Mickey Mouse to Machine Learning

Introducing Ashera

i3D Angel NFT Madness & Artwork Descriptions

Spring Cloud Bus — Refresh properties in Configuration server clients.

Spring Cloud Bus

The ‘X’ ilitis of Cloud Governance — An Overview

Quicksort Algorithm implemented without cumbersome partitioning schemes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tom Cantwell

Tom Cantwell

More from Medium

SASS → (SAssy CSS)

Essential CSS Tutorial — Part 3

INTRODUCTION TO RADIAL-GRADIENT IN CSS