Drawing a snowman in CSS… with no HTML elements!

The snowman from the image was drawn in CSS, without using JavaScript or HTML, as you can see in the following snippet:

What is that HTML code?

And here you can see a video of the drawing being coded step by step just using CSS (explanation of how it was done at the end of this post):

Time-lapse of the process

But what type of witchcraft is this? How is it possible?

Web development sometimes feels like magic

Obviously, there’s a trick. Codepen and other online editors, don’t show the basic structure of the document that the user is editing. The written HTML code is then wrapped in something like this:

In the snippet itself, there’s nothing in the HTML or JavaScript boxes, which makes it look like there’s no other code but CSS, but the code above (or something similar) is auto-generated to run.

Because it looks like there’s no HTML, some people call this type of CSS drawings a zero-element or no-div drawing… but truly there is an element: the <body> (or the <html> in the case of the snowman).

Mystery solved.

How it was done

As it can be seen in the video above, we used 3 elements for this drawing: the <html> tag, and its and pseudo-elements.

The html tag was used to generate the snowy background (we even added a small animation). It is all a bunch of different sized circles generated with radial-gradient, and positioned all over the place using the diverse properties of background.

For the body of the snowman, we used the body::before. We made it into a circle using border-radius: 50% that will be the left eye. Then used to create more circles of different sizes:

  • the other eye,
  • the nose,
  • the head,
  • the buttons in the middle section,
  • the middle section,
  • the bottom section,
  • some shadows between the different parts.

For one of the buttons, we used two circles so it would not look exactly like a circle. This was on purpose to break a little bit the symmetry of the cartoon.

For the shadows between the different sections of our snowman, we added box-shadows with a little bit of a blur.

Finally, with the body::after we made a transparent rectangle that covered the whole snowman. And tiltet it a little bit (again, to break the symmetry).

With three box-shadows we generated the hat. And then used multiple linear-gradient to create the arms, hands, and broom.

Et voilà ! Our snowman is complete!

Originally published at https://dev.to on December 6, 2020.

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro