Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

Fullstack Developer

Drawing a cartoon of a boy with curly hair with HTML and CSS

css html art youtube

I enjoy coding CSS drawings for fun. I find it relaxing and think it's an excellent way to practice CSS. So today, I did a session and completed this drawing on CodePen:

I recorded the process (as I normally do), but this time was a bit different: I recorded myself speaking and explaining the process on video for the first time. Typically, I only show time-lapses of the process as I'm too self-conscious of my voice and accent. Anyway, here's the video:

It's also my first long video, and I know it is pretty amateur (not a great mic, using iMovie for editing, etc.) So, any constructive feedback on the video will be appreciated and welcomed.

The process took longer than usual -I was describing each step out loud-, and followed these steps:

  • Draw the basic head using an oval with border-radius.
  • Add the ears (a flipped copy of each other with scaleX(-1)).
  • Attach the parts of the face: mouth, eyes, nose...
  • Add the neck (a simple square).
  • Draw the hair using a bunch of box-shadow in three steps.
  • Complete the body by setting a soft curve (border-radius) on a rectangle.

With that, the drawing had all parts done, but it looked too basic and flat. So, to finish the CSS art, I added some details like shadows, freckles, some blushing on the cheeks... mostly using box-shadows and some filters.

If you don't like long videos, or my voice is annoying or puts you to sleep (you wouldn't be the first), here's the time-lapse video I usually do:

If you enjoy this content, check the other videos on my channel too! :P

Article originally published on