Drawing a snowman in CSS... with no HTML elements!

#css #showdev #webdev

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

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):

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

Animated gif of a strange-looking man saying — Web development sometimes feels like this!

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:

<!doctype html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="link.to.css.code.from.editor" />
    <script src="link.to.js.code.from.editor"></script>
  </head>
  <body>
    <!-- Here goes the HTML from the editor -->
  </body>
</html>

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 ::before and ::after 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 box-shadow 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!