Painting with Pure CSS

Detail of Diana Smith's "Lace"

Last year, I fell in love with Diana Smith’s stunning CSS paintings: Francine, Vignes, and Zigario. (I loved them so much, I asked her to speak at XOXO’s Art+Code event last year.)

Incredibly, Diana types these out by hand, layering HTML elements and CSS properties with only a text editor and Chrome Developer Tools. In this post, she talks about the CSS properties she relies on most, with links to what her work would look like without each.

She just released her latest illustration, Lace, inspired by Flemish/baroque art and coded in two weekends, and it’s my favorite so far.

Her illustrations are designed for Chrome, but don’t let that stop you from viewing them in other browsers, especially older ones. Each collapses and distorts in unexpected ways, revealing the subtle differences between browsers as they evolved over time.

Here’s what “Lace” looks like in some other browsers I tried.

Internet Explorer 8 for Windows 7
Chrome 45 for Windows
Safari 13
Safari 10.1
Firefox 70


Leave a Reply

Your email address will not be published. Required fields are marked *