Take a Look as This Incredible Art Made with CSS

One thing about web design is that no matter how many intricately-defined standards there are, you can never be sure that whatever you create is going to look the same in all browsers. Even the very latest versions of the most popular browsers have different ways of handling assorted web technologies, which can affect the way your site renders; that’s why cross-platform testing is so important, especially if you’re relying on cutting-edge CSS animation.

While inconsistencies between browsers can be infuriating, every now and then they can throw up something utterly delightful, and here’s one fantastic example: the pure CSS art of Diana Smith. She creates beautiful browser-based art inspired by classic paintings, using only hand-written HTML and CSS; her latest creation, Lace (in the style of Flemish and Baroque works) is a stunning piece.

“Image” Varies Greatly in Different Browsers

This portrait looks different depending on the browser you view it in, because it’s not an “image” at all. It’s pure web code that your browser renders into a drawing every time you load the page.

Take a Look as This Incredible Art Made with HTML & CSS

PureCSS Lace is the latest of digital artist Diana Smith’s code portraits inspired by Flemish baroque oil paintings, joining PureCSS Francine from January 2018. Along with a few retro-inspired posters and a woman in neon-glowing profile, the pieces are created from code, instead of embedded .jpg image files that look the same no matter how you view them.

So, you can’t save Lace or Francine—you could screenshot them, but that would ruin what makes them so unique—but you can distort them into some pretty wacky versions of themselves, depending on the browser it’s rendered within.

“Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome,” Smith wrote in the GitHub repository where each of her projects and their source code is stored.

Motherboard loaded Lace up in several different browsers. The results were definitely laughable, yet still weirdly artful.

These are all screenshots of PureCSS Lace rendered in different browsers, so they’ll look the same in your browser no matter which you use, while showing off how different browsers transform the work.

Safari, for some reason, renders the lace frills of Lace to the front.



Things get weirder—and more Cubist—in a version of Opera from 2014.


Ironically, Microsoft Edge takes all the edges off.


Netscape Navigator looks like it was created in Microsoft Paint—appropriate, as both ruled the 90s.


“When you look at this image on different browsers, you’re kind of looking at the history of the internet and what was demanded of it at the time,” Smith told Motherboard.

But experimenting with different browsers also reveals a hint of the future: A ton of browsers these days are running Chromium, Google’s open-source browser code. Whereas Pure CSS Lace might have shown off how every browser is unique in the past, it now looks exactly the same on Chrome, Vivaldi, Brave, and Opera.

We will be happy to hear your thoughts

      Leave a Comment

      Web Training Guides
      Compare items
      • Total (0)