CSS Art Tutorial: Create a Cute Cartoon Creature
Tags: css, tutorial
Published: 2023-03-11 10:59:14

---
title: CSS Art Tutorial: Create a Cute Cartoon Creature
published: true
date: 2023-01-23 07:00:42 UTC
tags: css, tutorial
canonical_url: https://blog.eleftheriabatsou.com/css-art-tutorial-create-a-cute-cartoon-creature
---

## Introduction

In this article I'm describing how to create a cute cartoon face, **using only HTML and CSS**. I'm describing how to create the background, then the face (eyes, mouth, etc), then the body, and last but not least, if you're looking for something extra, how to create a fancier background with clouds.

Creating something [like this](https://codepen.io/EleftheriaBatsou/pen/bGvgaOQ?editors=0100) often refers to CSS art.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674406029179/cf6edef9-92d6-408b-b12a-2a2e49a9c6dc.gif)

**What is CSS art?**

_CSS art refers to the use of Cascading Style Sheets (CSS) to create visual designs and animations on web pages. This can include everything from simple text formatting to complex animations and interactive effects. CSS art can be created using a variety of techniques, such as CSS animations, transforms, and gradients, and can be used to create a wide range of visual effects. Some developers use CSS art to create unique, eye-catching designs for websites, while others use it to create interactive animations and other interactive effects._

<mark>Ok, let's start!</mark>

## The base 🖼

First things first, we need to create a background. To do so, I'll use the `body.`

```
body {
  background-color: var(--bg-color); 
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
}

```

Here is what I did:

- The first line sets the background color of the entire page to a variable named `--bg-color`. Variables in CSS are declared using the `var()` function and can be used to store values that will be reused throughout the stylesheet. In this case, the variable is used to set the background color of the entire page.

- The second line sets the height of the `body` element to 100% of the viewport height using the `vh` unit (1vh is equal to 1% of the height of the viewport).

- The third line sets the `display` property of the `body` element to `grid`. This tells the browser to lay out the child elements of the `body` element as a grid.

- The fourth line sets the `place-items` property of the `grid` container to `center`. This tells the browser to align the grid items along the horizontal and vertical center of the grid container.

- The fifth line sets the margin of the `body` element to 0, this will remove any default margin that the browser may have added to the body

After the `body`, I set the `.container`

```
.container {
  display: flex;
  justify-content: center;
  position: relative;
}

```

This block of code is a class selector for an element with the class `.container`.

- The first line sets the `display` property of the `.container` element to `flex`. This tells the browser to lay out the child elements of the `.container` element as a flex container.

- The second line sets the `justify-content` property of the flex container to `center`. This tells the browser to align the flex items along the horizontal center of the flex container.

- The third line sets the `position` property of the `.container` element to `relative`. This allows you to position the container relatively to its initial position, for example, you can use `top`, `right`, `bottom`, `left` properties to move it around.

## Create the head 🫥

Let's start our CSS art by creating a round head.

We will create:

1. a circle

2. add color to it

3. position it relative

and that's it.

```
.head {
  /* create a circle */
  width: 300px;
  height: 300px;
  border-radius: 50%;

  /* add some color so you can see it */
  border: 10px solid black;
  background: white;

  /* we need position relative b/s we're going to have a few elements inside the head. The elements will be positioned "absolutely" in releationship with the parent class (which is .head) */
  position: relative;

  /* we also need these 3 lines for the elements that are coming inside the .head */
  justify-content: center;
  display:flex;
  align-items: baseline;
}

```

Here is an image of the result:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674386269720/b738311e-674d-4994-a862-8c954125b355.png)

### Create an inner shadow and a neck

To create a shadow (inside the head) and a neck instead of creating 2 more classes we are going to use the pseudo-element `::before` and `::after`.

```
.head::before {
  content: "";
  position: absolute;

  /* add shadow */
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: inset -22px 5px 0 3px rgba(0,0,0,.2);
}

.head::after {
  content: "";
  position: absolute;

  /* add neck */
  width: 15px;
  height: 30px;
  background: white;
  margin-top: 300px;
  border: 10px solid black;
}

```

Let's examine the 1st two lines of `.head::before` and `.head::after`

```
.head::before {
  content: "";
  position: absolute;
}

```

This CSS code is targeting an element with the class of `.head`, and it's using the `::before` pseudo-element to insert some content before the element (in our case this is going to be a shadow).

- The `content: ""` property sets the content of the pseudo-element to an empty string, which means it will not display any content.

- The `position: absolute` sets the position of the pseudo-element to be absolute, which means it will be positioned relative to the nearest positioned ancestor element instead of the viewport.

So far our HTML looks like this:

```
<div class="container">
  <div class="head"></div>
</div>

```

And here is an image of the result:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674386134356/5d6e72a5-8e6f-4a03-aff4-3c4220e3a429.png)

### Create the eyes

For the eyes our HTML code will look like this:

```
<div class="container">
  <div class="head">
    <div class="eye left">
      <div class="cutout"></div>
    </div>
    <div class="eye right">
      <div class="cutout"></div>
    </div>
  </div>
</div>

```

The classes we're using are: `eye, left, right, cutout`

Let's start with `left` and `right`:

```
.left, .right {
  background: black;
  border-radius: 50%;
  width: 175px;
  height: 175px;
  position: absolute;
/* the eyes are centered b/s of the last 3 lines in the .head */

/* we also need the 3 lines b/s we are going to add the cutouts inside the class .left, .right */
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  margin-left: -180px;
}
.right {
  margin-left: 180px;
}

```

I like these big eyes! What about you? 😁

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674387062155/ea9390d0-72f5-4a20-82d8-a1043cec11bc.png)

But we're not done yet, we'll make them even better! To do so, we're going to use the pseudo-classes `::before` and `::after` just like we used them before.

The `::before` will help us add an **inner shadow to the eyes** :

```
.left::before, .right::before {
  content: "";
  position: absolute;

  /* add the inner shadow (the shadow inside the eyes) */
  width:175px;
  height: 175px;
  border-radius: 50%;
  box-shadow: inset -22px 5px 0 3px rgba(255,255,255,.164);
}

```

And the `::after` will help us add the **pupils** of the eyes:

```
.left::after, .right::after {
  content: "";
  position: absolute;

  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

.right::after {
/* let's style it a bit more. (overriding the previous properties) */
  width: 30px;
  height: 30px;
  background: transparent;
  border: 5px solid white;
}

```

We added the inner shadows, the pupils, we made the right pupil a bit different, but we have one more thing... the **cutouts**.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674387709115/56cc5c87-68ac-4f87-84ec-7855803ecc67.png)

For the cutouts:

```
.cutout {
  position: absolute;
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
  align-self: flex-end;
  margin-bottom: -180px;
}

```

Yeah! it now looks 10x better! (ok, a bit strange, but better!)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674388154309/6d9ed08c-dd29-467c-a16a-5cf61e10d157.png)

### Create the mouth

For the mouth, I'm going to create a new class in the HTML part.

```
<div class="head">
    <div class="eye left">
      <div class="cutout"></div>
    </div>
    <div class="eye right">
      <div class="cutout"></div>
    </div>

    <div class="mouth"></div>
  </div>

```

For the CSS part, I'll use the `.mouth` class and the pseudo-classes `::before` and `::after`

```
.mouth {
  width: 180px;
  height: 180px;
  position: absolute;
  border: 10px solid black;
  border-radius: 50%;
  align-self: flex-end;
  margin-top: 50px;

/* Now I want to hide everything on the top half of the head... (like a mask)
So, I'm using bennettfeely.com/clippy for this */
  clip-path: circle(60% at 50% 101%);
}

/* let's create chicks */
 .mouth::before, .mouth::after {
    content: "";
    position: absolute;

    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 10px solid black;
    top: 102px;
    left: -9px;
    clip-path: circle(50% at 0 0);
  }

/* let's seperate them (with the previous classes they are overlapping each other) */
  .mouth::after {
    left: 140px;
    top: 107px;
    clip-path: circle(50% at 100% 0);
  }

```

You'll notice that I'm using the `::after` pseaudo-class twice, this is because the first time the two elements are overlapping, so now I want to separate them.

Ok, this is what we have so far!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674391751784/39923676-f03c-444d-8c3a-d22df0be7ac8.png)

## Create the body 👁

Let's add one more class to the HTML part:

```
<div class="container">
  <div class="head">
    ...
  </div>

  <div class="body"></div>
</div>

```

Time for CSS.

First I'm creating the body. It's pretty simple... the only new thing you'll notice in the class is the `border-radius`.

```
/* Creating the body */
.body {
  position: absolute;
  height: 50px;
  width: 100px;
  background: blueviolet;
  top: 350px;
  border: 10px solid black;
/* To create a fancy border I'm using another tool: https://mdbootstrap.com/docs/standard/tools/design/fancy-border-radius/ */
  border-radius: 100% 100% 100% 100% / 100% 100% 0% 0%;
}

```

For the `border-radius` I used [this website](https://mdbootstrap.com/docs/standard/tools/design/fancy-border-radius/) to make the body look cooler!

The **body** is done! I decided to add some more details, like **hands**. To do so, I'll use the `::before` and `::after` (yes, I'm using these pseudo-classes a lot, they're damn helpful and quick!)

```
/* Preparing the hands.
I will have 2 hands but with this code the hands will be on top of each other*/
.body::before, .body::after {
  content: "";
  position: absolute;

  width: 15px;
  height: 20px;
  top: 30px;
}

```

OK, let's separate the hands:

```
.body::before {
  border-right: 10px solid black;
}
.body::after {
  border-left: 10px solid black;
  right: 0px;
}

```

Perfect! My cute little creature is ready!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674401980288/f10dac6d-2c5c-4187-9d15-deff2c2227e6.png)

## Bonus: Create a cute cloudy background 

If you want something extra in your CSS art why not add a fancy or cute background?! Well, here is how I did it...

It's pretty straightforward. First I'll add a new class:

```
<div class="container">
  <div class="bg"></div>
  <div class="head">
    ...
  </div>
  <div class="body"></div>
</div>

```

And then I'll add the CSS:

```
.bg {
  width: 100px;
  height: 50px;
  position: absolute;
  left: -100px;
  border-radius: 30%;
  /* background: white; */
  top: 20px;

/* adding the 3 shadows (clouds) */
  box-shadow:
    400px 100px 0 0 rgba(0,0,0,.15),
    50px 150px 0 0 rgba(0,0,0,.15),
    400px 250px 0 0 rgba(0,0,0,.15);
}

```

And that's it!

Note: if you look more closely at the final project on codepen you'll notice I added some animation too. That's a bit extra so I don't describe it in this article. But let me know if you want more details about animations, I'd love to write an article about them too :D

Check the [codepen](https://codepen.io/EleftheriaBatsou/pen/bGvgaOQ?editors=0100).

## Sum up💫

In this article, I described how to create a creature using only **CSS** and **HTML**.

I tried to explain all the classes, elements and my whole process but if you have any questions feel free to ask!

**Credits** : This is [my inspo](https://www.youtube.com/watch?v=uXBoQ4WRD9A), it's a really helpful video.

**Websites that helped me** :

1. [CSS clippy](https://bennettfeely.com/clippy/) (for the mouth)
2. [Fancy Border Generator](https://mdbootstrap.com/docs/standard/tools/design/fancy-border-radius/) (for the body)

Before you start creating something similar, **it'd be good to know** how:

- positions work (mainly position absolute, relative)
- some basic [flex-box properties](https://www.w3schools.com/css/css3_flexbox.asp) work
- to play around with `box-shadow`
- to use the `::before` and `::after`
- Extra: animations work

Feel free to tag me if you try something similar. I'd love to see your art!

* * *

Thank you for reading! <mark>Find the </mark> [<mark>code</mark>](https://codepen.io/EleftheriaBatsou/pen/bGvgaOQ?editors=0100) on Codepen.

* * *

👋 Hello, I'm Eleftheria, developer & public speaker.

🥰 If you liked this article consider sharing it.

🌈 [All links](https://limey.io/batsouelef) | [Twitter](https://twitter.com/BatsouElef) | [LinkedIn](https://www.linkedin.com/in/eleftheriabatsou/)