user profile image

Mona Lisa with pure CSS. Pointless but fun.


  1. Sire, you rule the CSS :)

  2. Awesome.

  3. This is... I'm pretty sure this is awesome, but I have a sneaking suspicion that it might just be insane :)

  4. Great job. And I agree, this is insane :]

  5. Alright, you won the internet.

    Can someone just shut down the internet now? It's over.

  6. very diligent human :)))))

  7. This must have taken forever, hah.

  8. I'm thinking this was done with some kind of script or online tool...

  9. Hey Jay, would love to know how you start this process. How do you start creating the image. Amazing, but would love to get more details.

  10. That is amazing but i think you have been used a software for converting this image to css?right

  11. This is amazing piece of css, it would be awesome to know more details about the process of creating 7500 line of box-shadow so i can paint my self :)

  12. WOW!!! I am inspired! I see your Mona Lisa, and raise you The Creation of Adam -

  13. Check out my Birth of Venus! Wrote a script to do it.

  14. Hi guys! Of course this is not made by hand. I code some PHP lines to automatise the process as an experiment. I'll put the class on Github in the afternoon. Need to be polished.

  15. As promised, here is the code to generate it.

  16. Well done! Maybe you can set up a booth at tech conventions and do CSS box-shadow portraits of people, and you could make them buy you a beer or something.

  17. Great job. Amazing :)

  18. Bravo!

  19. Here here for the beer. Thanks for putting out the PHP class

  20. Leo would be proud :)

  21. Great job Jay!

  22. Second man to pass the 10k views. Good job!

  23. Just to let you guys know...he did not actually do shows on his github account that he used a converter to change a picture into css.

  24. @harris carney... so HE DID actually do it... if you know what I mean. Of course, i didn't actually make the converter, but I used it to convert a painting that I actually painted! --- Anyways, really creative stuff Jay. Awesome.

  25. Harris, it's notified in the comment of the codepen and in this very page that I wrote my own script to reprocude Mona Lisa. The converter I wrote is linked.

  26. For what it's worth, I did a test with CSS zoom and found 20% to be the level at which a crisp/high-res image is displayed. At 250k, it gives you a postage-sized image on-screen, so it isn't quite efficient, but it is hella awesome.

  27. i made a similar image to css with Javascript , here is the pen :

  28. I have recently made it in my lab) Found few concepts of it now)

  29. I've also implemented this but all in the client side:

  30. Your skills are formidable, sir. Respect++

  31. I dig your experiment, sir! When I first saw this a few weeks ago, I remember wondering what the performance of rendering hundreds or thousands of box-shadows over and over again would be like, since these box-shadows are rendered only once and then left alone.

    So I let the idea stew for a while, and then I decided to build a toy of my own where all of the moving creatures were rendered via only multiple box-shadows from a single element. Turns out that it runs rather well, even on mobile devices.

    Thank you for making play of things that are absurdly complex, and creating a work of inspiration for others. :)

  32. 给跪了

  33. nice, thanks! I've made something like that and don't know where can I use it too))

  34. craz-e

  35. Same idea, but with insanity instead of PHP. Enjoy!

  36. mükemmellllll

  37. oh mi god this is crazy

  38. Oh my God. For an instant I thought it was hand crafted. That would have been insane.

  39. Master :-)

  40. Ohhh God!! This is amazing!!

  41. this is just...CSS GODLY works..great job!!

  42. Gabriel @gabriel-ribeiro on

    OMG i know nothing about css

  43. Insane!

    Good job!

  44. I have tried to do something similar using square recursion. Todo : export to box shadow Css.

  45. I bet Leonardo would have done it by hand if they had CSS back in the Renaissance... just sayin.

  46. Lol, this is awesome.

  47. I love it!!!

  48. Woah!! Hands down to you. !! (y)

  49. Got only one question....... how long!?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.