Drawing a snowman in CSS... with no HTML elements!
Tags: css, showdev, webdev
Published: 2020-12-06 18:56:25

The snowman from the image was drawn in CSS, without using JavaScript or HTML, as you can see in the following [snippet](https://codepen.io/alvaromontoro/full/QWKNbrQ):

{% codepen https://codepen.io/alvaromontoro/pen/QWKNbrQ %}

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

{% youtube RhO0UmcREGo %}

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

<figure>
![Animated gif of a strange-looking man saying "magic" while moving his hands dramatically](https://dev-to-uploads.s3.amazonaws.com/i/skikd7jc8omzhnmdc4cl.gif)
<figcaption>Web development sometimes feels like this!</figcaption>
</figure>

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:

```html
<!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](https://www.youtube.com/watch?v=RhO0UmcREGo), we used 3 elements for this drawing: the `<html>` tag, and its [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::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`](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()), and positioned all over the place using the diverse properties of [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background).

For the body of the snowman, we used the `body::before`. We made it into a circle using [`border-radius: 50%`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) that will be the left eye. Then used [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/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-shadow`s we generated the hat. And then used multiple `linear-gradient` to create the arms, hands, and broom.

_Et voilà !_ Our snowman is complete!