CSS Pixel Art Generator

Published: 2021-11-21

Recently, I read an article outlining how to create CSS pixel art with box shadows. I thought it was a really cool idea - and thought it'd be interesting to make a generator to let you create exportable pixel art from the browser using this effect. In the Codepen demo below, you can draw your pixel creations, and then click "Generate CSS" to get your pixel art in CSS, which you can copy into your web pages. Works better in full screen! How it Works As described in the article, we use scaled-up box shadows to act as pixels on the screen. We can scale these up and down to make our pixel art bigger or smaller.

Read More