CSS Art – How to Make a Game Character – Goomba

Pyxofy -

Introduction

Meet Bowser’s infamous mushroom foot soldiers, Goomba!

Let’s create this video game character by combining different CSS and SVG techniques in this article.

We’ll be using below CSS technologies. Visit our CSS Art articles section for more details.

Preview

Our image will consist of these different parts:

  1. Eyes
  2. Glabella
  3. Face
  4. Eyebrows
  5. Teeth, Lips, and Mouth
  6. Body
  7. Left and Right Foot

Prerequisites

We don’t assume prior knowledge of CSS or HTML, but it helps if you have some familiarity with how they work. Jump over to this article if you require an HTML and CSS primer.

We assume that you have set up tools to create CSS art. If you haven’t, this article will show you how to set them up.

HTML Structure

Here’s the HTML code for our image.

<div class="container">
  <div class="right-foot st"></div>
  <div class="body st"></div>
  <div class="face st"></div>
  <div class="right-eye st"></div>
  <div class="left-eye st"></div>
  <div class="eye-brow-right st"></div>
  <div class="eye-brow-left st"></div>
  <div class="glabella st"></div>
  <div class="mouth st"></div>
  <div class="right-tooth st"></div>
  <div class="left-tooth st"></div>
  <div class="lip st"></div>
  <div class="left-foot st"></div>
</div>

container is our outermost enclosure. This enables us to center the art and put a light gray border. The rest of the divs represent each of Goomba’s parts.

It’s important to keep the HTML structure as is for each part to display properly.

Color Palette

Here’s the CSS code for the color palette, body and container div.

/**************************************/
/* Color, Body and Container Settings */
/**************************************/
/* Color palette */
:root {
  /* Transparent */
  --t: transparent;

  /* Goomba Face */
  --face-1: hsla(18, 46%, 45%, 1);
  --face-2: hsla(20, 45%, 46%, 1);
  --face-3: hsla(21, 43%, 49%, 1);
  --face-4: hsla(21, 48%, 33%, 1);
  --face-5: hsla(355, 17%, 16%, 1);

  /* Eyebrows */
  --eyebrow-1: hsla(162, 3%, 30%, 1);
  --eyebrow-2: hsla(214, 5%, 25%, 1);
  --eyebrow-3: hsla(359, 11%, 2%, 1);

  /* Goomba Eyes */
  --eye-1: hsla(300, 0%, 100%, 1);
  --eye-2: hsla(333, 3%, 19%, 1);
  --eye-3: hsla(359, 7%, 3%, 1);

  /* Goomba Tooth */
  --tooth-1: hsla(333, 51%, 97%, 1);
  --tooth-2: hsla(214, 4%, 68%, 1);

  /* Goomba Mouth */
  --mouth-1: hsla(359, 11%, 2%, 1);
 
  /* Goomba Lip */
  --lip-1: hsla(19, 44%, 46%, 1);
  --lip-2: hsla(18, 45%, 45%, 1);

  /* Goomba Body */
  --body-1: hsla(26, 30%, 59%, 1);
  --body-2: hsla(31, 23%, 38%, 1);
  --body-3: hsla(40, 15%, 29%, 1);

  /* Goomba Feet */
  --feet-1: hsla(31, 35%, 37%, 1);
  --feet-2: rgb(113, 79, 52);
  --feet-3: rgb(31, 29, 26);
  --feet-4: rgb(61, 60, 48);

  /* Shadow */
  --shadow: hsla(240, 0%, 26%, 0.5);
}

/* Center shapes */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Set light gray border */
.container {
  width: 500px;
  height: 500px;
  /*   border: 5px solid lightgray; */
  background: transparent;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1px;
  margin: 5px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

If you haven’t created a color palette before, you can check this article for an in-depth explanation.

Let’s start with Goomba’s right eye.

Right Eye

Right Eye - Base

CSS Code:

.right-eye {
  position: absolute;
  width: 81px;
  height: 116px;
  top: 104px;
  left: 253px;
  background: radial-gradient(at 45% 45%, var(--eye-1) 60%, var(--eye-2));
  border: 1px solid var(--shadow);
  border-radius: 50%;
  transform: rotate(1deg);
}

Goomba’s right eye base is a vertically elongated ellipse.

We give it a thin border with, border: 1px solid var(--shadow);.

This code gives it a more rounded, 3D feel.

 background: radial-gradient(at 45% 45%, var(--eye-1) 60%, var(--eye-2));

Let’s work on the Iris, Pupil and Highlight next.

Right Eye - Final

CSS Code:

.right-eye::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 45px;
  top: 32px;
  left: 6px;
  background: 
	/* Highlight - White */ 
	  radial-gradient(100% 100% at 50% 50%,
       var(--eye-1) 49%,
       var(--t) 0%)
       52% 17% / 13px 13px,

    /* Pupil - Grey */
      radial-gradient(100% 100% at 50% 50%, 
	   var(--eye-2) 49%, 
       var(--t) 50%) 
	   50% 55% / 14px 21px,

    /* Iris - Black */
      radial-gradient(100% 100% at 50% 50%, 
	   var(--eye-3) 49%, 
       var(--t) 50%) 
       50% 58% / 35px 45px;
  background-repeat: no-repeat;
  border-radius: 50%;
  filter: blur(0.01px);
}

Let’s break down the background CSS code down in the next sections.

You can learn how to control Gradient Size and Placement technique used in the following sections in this article.

Right Eye - Iris

CSS Code:

/* Iris - Black */
radial-gradient(100% 100% at 50% 50%, 
 var(--eye-3) 49%, 
 var(--t) 50%) 
 50% 58% / 35px 45px;

Our Iris consists of a black ellipse.

Right Eye - Pupil

CSS Code:

/* Pupil - Grey */
radial-gradient(100% 100% at 50% 50%, 
 var(--eye-2) 49%, 
 var(--t) 50%) 
 50% 55% / 14px 21px,

We add a grey ellipse on top of our Iris to simulate a Pupil.

Right Eye - Highlight

CSS Code:

/* Highlight - White */ 
radial-gradient(100% 100% at 50% 50%,
 var(--eye-1) 49%,
 var(--t) 0%)
 52% 17% / 13px 13px,

To finish our right eye, we add a white circle Highlight on top of our Pupil.

We use filter: blur(0.01px); to give all three components a slight blur effect.

Left Eye

The Left Eye is almost a mirror image of the Right Eye; hence, we won’t provide an in-depth explanation for this section.

Left Eye - Base

CSS Code:

.left-eye {
  position: absolute;
  width: 69px;
  height: 115px;
  top: 98px;
  left: 152px;
  background: radial-gradient(at 35% 45%, var(--eye-1) 60%, var(--eye-2));
  border: 1px solid var(--shadow);
  border-radius: 50%;
  transform: rotate(15deg);
}
Left Eye - Final

CSS Code:

.left-eye::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 45px;
  top: 29px;
  left: 37px;
  background: 
	/* Highlight - White */ 
	  radial-gradient(100% 100% at 50% 50%,
       var(--eye-1) 49%,
       var(--t) 0%)
       41% 16% / 12px 14px,

    /* Pupil - Grey */
      radial-gradient(100% 100% at 50% 50%, 
		var(--eye-2) 49%, 
        var(--t) 50%) 
        50% 55% / 14px 21px,

    /* Iris - Black */
      radial-gradient(100% 100% at 50% 50%, 
		var(--eye-3) 49%, 
		var(--t) 50%) 
		50% 50% / 35px 45px;
  background-repeat: no-repeat;
  border-radius: 50%;
  transform: rotate(-5deg);
  filter: blur(0.01px);
}

Let’s make the Glabella in the next section.

Glabella

Glabella - Base

CSS Code:

.glabella {
  position: absolute;
  width: 27px;
  height: 34px;
  top: 100px;
  left: 230px;
  background: linear-gradient(
    to top,
    var(--face-5) 40%,
    var(--face-4),
    var(--t)
  );
  transform: rotate(7deg);
  border-radius: 0% 0% 100% 100%;
  border-bottom: 0;
}

Our glabella is “U” shaped.

We use border-radius: 0% 0% 100% 100%; to make the bottom portion rounded.

We use linear-gradient to give our glabella base a smooth gradient.

  background: linear-gradient(
    to top,
    var(--face-5) 40%,
    var(--face-4),
    var(--t)
  );
Glabella - Final

CSS Code:

.glabella::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 34px;
  top: -5px;
  left: 2.5px;
  background: linear-gradient(
    to top,
    var(--face-1),
    var(--face-2) 80%,
    var(--t)
  );
  border-radius: 0% 0% 100% 100%;
  border-bottom: 0;
}

We use another “U” shape to finalize our glabella. This shape will fade in nicely to the face we’re creating in the next section.

CSS clip-path and SVG will be used heavily in the follow sections. This article describes how to use clip-path in detail.

Face

Face

CSS Code:

.face {
  position: absolute;
  width: 395px;
  height: 327px;
  top: 17px;
  left: 53px;
  background: radial-gradient(
    at 48% 40%,
    var(--face-3),
    var(--face-2),
    var(--face-1),
    var(--face-5)
  );
  clip-path: path(
    "M 93,72 C 154,-39 287,3 314,72 Q 333,104 359,165 C 396,207 424,312 294,323 Q 189,317 85,307 C 43,305 -39,249 30,164 Q 63,124 93,72"
  );
}

We use clip-path to make our face shape. We use radial-gradient to give our shape its gradient.

The SVG commands within clip-path are easier to parse when you break down each command line by line.

M 93,72 
C 154,-39 287,3 314,72 
Q 333,104 359,165 
C 396,207 424,312 294,323 
Q 189,317 85,307 
C 43,305 -39,249 30,164 
Q 63,124 93,72

Let’s make the right and left eyebrows next.

Eyebrows

Right Eyebrow

CSS Code:

.eye-brow-right {
  position: absolute;
  width: 156px;
  height: 97px;
  top: 37px;
  left: 250px;
  background: radial-gradient(
    circle at 55% 15%,
    var(--eyebrow-1) 1%,
    var(--eyebrow-2) 10%,
    var(--eyebrow-3) 55%
  );
  clip-path: path(
    "M 153,46 C 144,-8 100,-5 74,22 Q 64,31 50,49 Q 30,78 0,85 V 91 Q 35,89 62,55 C 70,47 108,7 153,46"
  );
}

Similar to our face section, we make the eyebrows using clip-path and radial-gradient.
Modify circle at 55% 15%, to control the eyebrow highlight location.

Left Eyebrow

CSS Code:

.eye-brow-left {
  position: absolute;
  width: 118px;
  height: 102px;
  top: 27px;
  left: 117px;
  background: radial-gradient(
    circle at 35% 15%,
    var(--eyebrow-1) 1%,
    var(--eyebrow-2) 10%,
    var(--eyebrow-3) 55%
  );
  clip-path: path(
    "M 2,40 C 11,-5 48,-8 66,26 Q 78,43 88,66 Q 98,88 116,93 V 101 Q 86,91 77,71 Q 68,52 55,38 C 36,18 26,28 2,40"
  );
}

In the next section, let’s make the right and left tooth.

Teeth

Right Tooth

CSS Code:

.right-tooth {
  position: absolute;
  width: 38px;
  height: 51px;
  top: 229px;
  left: 325px;
  background: radial-gradient(at 30% 20%, var(--tooth-1), var(--tooth-2));
  border-radius: 50% 50% 0% 0%/ 100% 100% 0% 0%; 
}

We use border-radius: 50% 50% 0% 0%/ 100% 100% 0% 0%; to shape our right tooth.

To give our teeth a more rounded shape, we use

background: radial-gradient(at 30% 20%, var(--tooth-1), var(--tooth-2));
Left Tooth

CSS Code:

.left-tooth {
  position: absolute;
  width: 37px;
  height: 47px;
  top: 213px;
  left: 109px;
  background: radial-gradient(at 30% 20%, var(--tooth-1), var(--tooth-2));
  border-radius: 50% 50% 0% 0%/ 100% 100% 0% 0%; */
}

The left tooth is almost an identical copy of the right tooth.

In the next section, let’s make Goomba’s lips. Lips will hide the teeth bottom portion.

Lips

Left Lip

CSS Code:

.lip {
  position: absolute;
  width: 50px;
  height: 14px;
  top: 251px;
  left: 105px;
  background: var(--lip-1);
  border-radius: 50%;
  transform: rotate(-11deg);
}

Both our left and right lips are ellipses.

Right Lip

CSS Code:

.lip::after {
  content: "";
  position: absolute;
  width: 49px;
  height: 24px;
  top: 53px;
  left: 205px;
  background: linear-gradient(45deg, var(--lip-1), var(--lip-2));
  border-radius: 50%;
  transform: rotate(32deg);
}

transform: rotate(32deg); is used to control the rotation angle of the ellipse.

Up next is the mouth. We will use clip-path to make this shape.

Mouth

Mouth

CSS Code:

.mouth {
  position: absolute;
  width: 278px;
  height: 72px;
  top: 211px;
  left: 100px;
  background: var(--mouth-1);
  clip-path: path(
    "M 8,48 C 41,27 233,34 265,69 Q 267,58 257,30 C 250,13 240,13 232,27 Q 222,46 207,42 Q 146,24 59,35 Q 49,35 45,25 C 40,4 24,-12 14,14 Q 7.5,30 8,48"
  );
}

We use clip-path and SVG commands to make our mouth shape. This combination can create just about any shape you can imagine.

Next up, body section.

Body

Body

CSS Code:

.body {
  position: absolute;
  width: 153px;
  height: 96px;
  top: 319px;
  left: 160px;
  background: linear-gradient(
    to right,
    var(--body-3),
    var(--body-2),
    var(--body-1)
  );
  border-radius: 33px 35px 48px 70px;
  filter: blur(0.1px);
}

We use border-radius: 33px 35px 48px 70px; to give our body its unique shape. filter: blur(0.1px); is used to give it a slight blur.

On to our last section!

Right Foot

CSS Code:

.right-foot {
  position: absolute;
  width: 145px;
  height: 105px;
  top: 377px;
  left: 223px;
  background: radial-gradient(
    at 65% 40%,
    var(--feet-1),
    var(--feet-2) 15%,
    var(--feet-3) 75%
  );
  clip-path: path(
    "M 53,7 Q 90,-2 111,7 C 149,25 155,57 118,81 Q 84,102 41,103 Q 14,105 2,87 Z"
  );
  transform: rotate(39deg);
  filter: blur(0.1px);
}

Both right and left foot are made, combining radial-gradient and clip-path.

Left Foot

For the left foot, we make a base shape first, then add the sole shape to complete it.

Left Foot - Base

CSS Code:

.left-foot {
  position: absolute;
  width: 137px;
  height: 127px;
  top: 333px;
  left: 69px;
  background: radial-gradient(
    circle at 55% 5%,
    var(--feet-1) 0% 5%,
    var(--feet-2) 20%,
    var(--feet-3) 55%
  );
  clip-path: path(
    "M 21,10 C 71,-21 155,32 131,106 C 111,140 81,118 58,110 Q 15,88 5,63 Q -4,27 21,10"
  );
}

This code gives our left foot its gradient.

radial-gradient(
  circle at 55% 5%,
  var(--feet-1) 0% 5%,
  var(--feet-2) 20%,
  var(--feet-3) 55%
);
Left Foot - Sole

CSS Code:

.left-foot::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 77px;
  top: 47px;
  left: 10px;
  background: radial-gradient(
    at 0% 10%,
    var(--feet-1) 20%,
    var(--feet-2),
    var(--feet-3)
  );
  clip-path: path(
    "M 7,28 C 5,24 -14,-13 43,11 Q 73,30 86,65 C 84,62 100,86 57,66 Q 18,45 7,28"
  );
}

Our left foot is complete!
This concludes our article.
Visit our CSS Art article collection to learn more techniques.

You can see and play with the code at Pyxofy’s CodePen page.

See the Pen CSS Art - Goomba by Pyxofy (@pyxofy) on CodePen.

Conclusion

Through the combination of gradients, linear and radial, we gave Goomba a more 3D look.

We learned how to use CSS clip-path and filter: blur to make unique shapes.

Experiment, modify the different CSS values to suit your needs. This is the best way to learn CSS.

Please share your art with us on Twitter @pyxofy, on LinkedIn, or Facebook.

We hope you liked this article. Kindly share it with your network. We really appreciate it.

Tweet this article!
Share on LinkedIn
CSS Art - How to Make a Game Character - Super Mario
A plumber jumping in and out of pipes, throwing fireballs while rescuing a princess. Step-by-step article to create a world renowned game character.
PyxofyPyxofy
CSS Art – How to Make a Space Shuttle – Orbiter
Space shuttle orbiters are amazing machines. Can we make it with CSS? You bet! Join us making it step-by-step.
PyxofyPyxofy
CSS Art
Articles for creating CSS Art.
Pyxofy
Scratch - Pyxofy
Scratch 3.0の使い方を、プログラミング初心者や子どもにも分かりやすく紹介しています。
Pyxofy