Drawing a Koala with HTML and CSS
Alvaro Montoro

Alvaro Montoro @alvaromontoro

About: CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person (He/Him)

Location:
Austin, TX
Joined:
Apr 27, 2019

Drawing a Koala with HTML and CSS

Publish Date: Jun 29
81 9

After a while not doing any CSS Art —mainly because of work reasons—, I decided to create something this weekend.

I didn't know what I wanted to do, just that I didn't want it to be flag. It had to be something that required some shadows and gradients... and I must admit that I ended struggling a little bit with that. Lack of practice?

After seeing a cartoon of a koala online, I decided to go with that. It didn't end up looking anything like the image that triggered the idea, but the result is not bad either —although I must admit it's not my favorite either.

You can see the source code and a live demo on CodePen:

I struggled with the lights and the shadows, and trying to add a bit of "texture." Hopefully, future drawings will be nicer.

This drawing uses some common CSS Art properties and attributes:

  • Positioning
  • Custom properties
  • Background gradients
  • Border radius
  • Pseudo-elements
  • Shadows
  • Masks
  • Clip-path
  • Combinators
  • Some bad coding and code repetition :-/

I recorded the coding process and shared in on my YouTube channel. I had been silent for a while, and it's a nice way to come back.

Comments 9 total

  • Anthony Max
    Anthony MaxJun 30, 2025

    Lol, that turned out cool

  • Abhiwan Technology
    Abhiwan TechnologyJul 1, 2025

    This seems to be very intresting. Apart from this you can also check the portfolio of game development company in India. This company has done various engaging activities to attract global tech audiences and gaming audiences.

  • nadeem zia
    nadeem ziaJul 1, 2025

    Amazing work

  • Ezpie
    EzpieJul 1, 2025

    who wakes up one day and decides to make a koala out of CSS? WHO HUH!?

    • Alvaro Montoro
      Alvaro MontoroJul 2, 2025

      Who has two thumbs and make weird choices every now and then? 😄

      • Ezpie
        EzpieJul 3, 2025

        Well, that would be me, honestly. But coming up with weird choices isn't a bug its just a feature ok? Its a bug that's a feature ok? We call it a buture.

  • Nathan Tarbert
    Nathan TarbertJul 3, 2025

    Pretty cool comeback, I know getting those gradients and shadows just right is a pain. I always mess up the details too, so respect for sharing the whole process

  • Bhuvi D
    Bhuvi DJul 3, 2025

    So cuteee

  • Muhammad Munir
    Muhammad MunirJul 4, 2025

    😊

Add comment