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

Post Optimize Bubble Sort

Is Kubernetes a DIY platform?

Getting started with Netezos.RPC

Flutter and Firebase (I): Authentication.

Ansible with AWS EC2 — Part 1

What is Kubernetes?

BUG HUNTING BOUNTY WINNER LIST

You Can’t Fail To Learn A New Language With These AWS AI Services: Translate, Rekognition, Polly

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

THE DESERTCART

CSS Grid: dynamic number of columns with a min width

How to create a responsive contact form using HTML

學習筆記|學期一|為客戶打造履歷網頁