Woman Illustration using HTML and CSS

Share your love

Illustrations are a great way to add a unique and personalized touch to your web projects. In this tutorial, we’ll show you how to create a woman illustration using HTML and CSS. We’ll start by creating a basic HTML structure for the illustration, then use CSS to style the woman’s features such as hair, face, clothing, and accessories. We’ll also add a subtle shadow effect to give the illustration a more realistic look. Next, we’ll show you how to customize the woman’s features to your liking, including changing the hair and clothing color, adding details such as jewelry, and more. By the end of this tutorial, you’ll have a good understanding of how to create a unique and personalized woman illustration using HTML and CSS, and be able to apply these techniques to your own web projects. So, let’s get started and create a beautiful woman illustration using HTML and CSS!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

Woman Illustration using HTML and CSS

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Woman Illustration using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag.

<div class="cartoon" role="img" aria-labelledby="desc">
    <div id="desc">Polygonal drawing of a woman</div>
    <div class="face-1"></div>
    <div class="face-2"></div>
    <div class="face-3"></div>
    <div class="shirt"></div>
    <div class="shirt-clear"></div>
    <div class="shirt-dark"></div>
    <div class="shirt-dark-2"></div>
    <div class="lip-bottom"></div>
    <div class="lip-bottom-dark"></div>
    <div class="lip-bottom-light"></div>
    <div class="lip-top"></div>
    <div class="lip-top-dark"></div>
    <div class="lip-top-light"></div>
    <div class="chin-line"></div>
    <div class="cheek-2"></div>
    <div class="cheek-dark"></div>
    <div class="cheek-light"></div>
    <div class="eye-1-top"></div>
    <div class="eye-1-back"></div>
    <div class="eye-1-eyelid"></div>
    <div class="eye-1-eyebrow"></div>
    <div class="eye-cheek"></div>
    <div class="eye-2-top"></div>
    <div class="eye-2-lid"></div>
    <div class="eye-2-eyebrow"></div>
    <div class="hair-1"></div>
    <div class="hair-2"></div>
    <div class="hair-line"></div>
    <div class="shadow-nose"></div>
    <div class="shadow-ear"></div>
    <div class="nose-1"></div>
    <div class="nose-2"></div>
    <div class="hair-back"></div>
</div>

CSS Code 

Create a file style.css and paste the code below.

html,
body {
  background: #889eff;
}

#desc {
  height: 0;
  width: 0;
  overflow: hidden;
  left: -1000in;
}

.cartoon {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 95vmin;
  height: 95vmin;
}

.cartoon div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.face-1 {
  background: #dc9178;
  clip-path: polygon(
    46.8% 76.1%,
    39.2% 27%,
    44.5% 14.3%,
    61% 10.9%,
    72.6% 19%,
    74.5% 27.1%,
    74% 38.3%,
    73.8% 42.3%,
    73.4% 46.3%,
    71.6% 52.9%,
    69.8% 56.4%,
    66.9% 61.1%,
    64.5% 63.5%,
    64% 68.7%,
    65.8% 70.2%,
    70.3% 80.4%
  );
}

.shirt-clear {
  background: #00237a;
  clip-path: polygon(
    -0.4% 103.6%,
    1% 93%,
    2.8% 91.4%,
    5.8% 87.2%,
    9.4% 84.8%,
    8.2% 89.2%,
    8.6% 92.6%,
    10.2% 89.2%,
    12.4% 96.8%,
    12.4% 108.8%,
    24.8% 102.8%,
    22.2% 96.2%,
    29.8% 100.6%,
    29.4% 113.6%,
    4% 112.8%
  );
}

.shirt-dark {
  background: #2e2334;
  clip-path: polygon(
    103.6% 98%,
    98.8% 92%,
    97.2% 87%,
    95.4% 83.2%,
    93% 81.8%,
    94.4% 85%,
    94.4% 90.2%,
    94.2% 97%,
    94% 101%,
    90.6% 101.8%,
    90.6% 97.2%,
    89.4% 90.8%,
    87.2% 85.6%,
    87% 92.4%,
    87% 114%
  );
}

.shirt-dark-2 {
  background: #2e2334;
  clip-path: polygon(
    65.1% 69.55%,
    64.55% 70.95%,
    63.95% 72.45%,
    64.9% 73.95%,
    61.5% 76.3%,
    62.3% 77.9%,
    65.4% 77.4%,
    67.85% 75.8%,
    69.9% 76.55%,
    70.55% 73.15%,
    69.55% 72.55%,
    67.5% 71.75%,
    67.05% 71.3%,
    66% 69.45%
  );
}

.lip-bottom-light {
  background: rgba(255, 255, 255, 0.33);
  clip-path: polygon(
    61.6% 56.05%,
    63.55% 56.2%,
    62.4% 57.45%,
    61.3% 57.25%,
    61.25% 56.8%
  );
}

.shadow-ear {
  background: rgba(0, 0, 0, 0.2);
  clip-path: polygon(
    34% 35%,
    32.2% 35.2%,
    32.2% 29.8%,
    32.6% 21.8%,
    39% 11.4%,
    44% 9.8%,
    38% 16.6%,
    42.6% 16.2%,
    38.8% 22.8%,
    43.2% 19%,
    44.6% 14.8%,
    49.8% 14.8%,
    43.6% 20.8%,
    38.6% 26.2%,
    36.8% 28.6%,
    39.4% 28.6%,
    38.4% 35%,
    38.8% 47.8%,
    37% 44.6%,
    37% 40.6%,
    34.2% 43.8%,
    33% 42.6%,
    34.6% 40.6%,
    35.2% 37.6%
  );
}

.shadow-nose {
  background: rgba(0, 0, 0, 0.1);
  clip-path: polygon(
    54.1% 47.2%,
    56.1% 45.4%,
    59.4% 45.1%,
    61.6% 45.9%,
    59% 44.7%,
    54.7% 45%,
    48.4% 47.6%,
    48.7% 50.1%,
    53.2% 48.2%
  );
}

.hair-line {
  background: #945164;
  opacity: 0.5;
  clip-path: polygon(
    50.6% 14.4%,
    46.8% 23.2%,
    44.6% 32.7%,
    44% 44.2%,
    45.4% 49.6%,
    48.2% 56.8%,
    50% 59.4%,
    46.3% 54.2%,
    43.8% 47.1%,
    43.2% 38.4%,
    44% 29.6%,
    45.7% 20.4%,
    48.9% 15.9%
  );
}

.cheek-light {
  background: rgba(255, 255, 255, 0.2);
  clip-path: polygon(
    66.1% 43.3%,
    68.35% 46.05%,
    67.9% 48.45%,
    63.3% 50.4%,
    64.55% 51.6%,
    67.25% 52.55%,
    69.65% 46.9%,
    71.9% 42.65%,
    70.65% 42.05%,
    67.8% 43.25%
  );
}

.cheek-dark {
  background: rgba(0, 0, 0, 0.1);
  clip-path: polygon(
    60.2% 64.2%,
    64.25% 60.15%,
    67.5% 53.85%,
    69.9% 49.4%,
    65.1% 46.05%,
    64.7% 47.55%,
    65.8% 50.4%,
    67.1% 51.9%,
    64% 55.2%,
    61.45% 58.4%,
    55.85% 59.65%,
    58.85% 60.55%,
    62.7% 60.35%
  );
}

.lip-bottom-dark {
  background: #2856e3;
  clip-path: polygon(
    52.9% 55.1%,
    57.7% 54.7%,
    56% 56.3%,
    56.8% 57.9%,
    54.5% 57.3%
  );
}

.lip-bottom {
  background: #b557b0;
  clip-path: polygon(
    52.8% 55.9%,
    57.7% 54.6%,
    63.5% 55.8%,
    62.8% 57.3%,
    61.1% 58%,
    58.5% 58.4%,
    55.2% 57.6%
  );
}

.chin-line {
  background: rgba(0, 0, 0, 0.75);
  clip-path: polygon(
    45.1% 60.5%,
    54.2% 65.4%,
    58.8% 65.8%,
    64.2% 64.2%,
    58.5% 66.3%,
    56.2% 66.5%,
    53.6% 66.4%,
    47.3% 62.9%
  );
}

.eye-1-back {
  background: #ad8495;
  clip-path: polygon(
    64.2% 37.48%,
    67.53% 37.52%,
    70.6% 36.95%,
    68.98% 36.1%,
    64.95% 36.7%
  );
}

.eye-1-top {
  background: #945164;
  clip-path: polygon(
    64% 37.5%,
    65.58% 38.5%,
    68.23% 38.58%,
    70.73% 37.33%,
    71.95% 36.98%,
    72.15% 35.75%,
    70.98% 34.2%,
    70.2% 35%,
    65.1% 36.38%
  );
}

.eye-1-eyelid {
  background: #2d2136;
  clip-path: polygon(
    63.3% 37%,
    65.1% 35.7%,
    68.5% 35%,
    70.2% 35.2%,
    71.2% 36.5%,
    71% 37.4%,
    69.4% 36.7%,
    68.4% 36.7%,
    68.2% 37.5%,
    67.3% 37.6%,
    66.6% 37.6%,
    65.2% 37%,
    64.1% 37.8%
  );
}

.lip-top-light {
  background: #b0533f;
  clip-path: polygon(61.9% 55.3%, 63.8% 54.6%, 64.3% 56%, 63.1% 56%);
}

.lip-top-dark {
  background: #ba6174;
  clip-path: polygon(
    58.9% 53.2%,
    59.2% 55.6%,
    61.7% 55.8%,
    64.3% 55.3%,
    62.8% 53.3%,
    60.7% 53.1%
  );
}

.lip-top {
  background: #8258a8;
  clip-path: polygon(
    52.7% 55.2%,
    55.6% 53.1%,
    57.7% 52.9%,
    59.1% 53.3%,
    61.7% 53.2%,
    63.1% 53.7%,
    64.5% 55.9%,
    63.2% 56.2%,
    59.8% 55.6%,
    58.6% 55.9%,
    55.7% 55.2%
  );
}

.eye-2-top {
  background: #ae8597;
  clip-path: polygon(
    45.9% 36.7%,
    49.9% 37.2%,
    53.2% 36.1%,
    50.1% 35.1%,
    47.4% 35.8%
  );
}

.cheek-2 {
  background: #97678d;
  clip-path: polygon(49.4% 50.4%, 50.4% 50.8%, 52.8% 48.1%, 50.9% 46.9%);
}

.eye-cheek {
  background: #97678d;
  clip-path: polygon(
    56% 32.2%,
    49.4% 31.8%,
    49.4% 35.6%,
    50.2% 37.9%,
    46.3% 41.2%,
    50.1% 45.9%,
    54.3% 37.7%,
    51.9% 37.3%,
    53.7% 35.3%,
    55.4% 35.2%
  );
}

.eye-1-eyebrow {
  background: #6a3d4a;
  clip-path: polygon(
    62.7% 33.1%,
    66.4% 32.4%,
    70.2% 32.2%,
    72.3% 32.8%,
    70.9% 30.4%,
    65.5% 30.7%,
    63.3% 31.3%
  );
}

.eye-2-lid {
  background: #0b3584;
  clip-path: polygon(
    44.1% 36.1%,
    48.6% 34.4%,
    51.1% 34.6%,
    53.7% 35.9%,
    52.7% 36.5%,
    51.5% 36.1%,
    51.4% 36.9%,
    50.5% 37.4%,
    49.5% 37.4%,
    48.6% 37.3%,
    47.8% 36.3%,
    45.5% 36.8%
  );
}

.eye-2-eyebrow {
  background: #0b3584;
  clip-path: polygon(
    43.3% 33%,
    47.9% 32%,
    55.1% 33%,
    56.1% 31.9%,
    52.3% 30.9%,
    47.5% 30.5%,
    44.2% 31.7%
  );
}

.hair-2 {
  background: #16173c;
  clip-path: polygon(
    31.6% 35.3%,
    33.6% 35.3%,
    34.6% 37.9%,
    35.7% 38.2%,
    38.3% 37.5%,
    38.3% 33.9%,
    40.8% 29.7%,
    39.6% 25.5%,
    44.5% 20%,
    51.3% 15.8%,
    52.7% 13.9%,
    51.4% 10.6%,
    53.6% 10.9%,
    53.2% 12.9%,
    55.1% 14.3%,
    62.6% 14.3%,
    57.1% 9.8%,
    54.8% 6.9%,
    52.4% 5.9%,
    47.9% 6%,
    42.8% 7.5%,
    39.7% 10.2%,
    35.9% 15.3%,
    32.6% 21%,
    32.4% 25.5%,
    32% 29.4%,
    31.3% 32.2%
  );
}

.hair-1 {
  background: #352225;
  clip-path: polygon(
    31.6% 35.3%,
    34% 35.3%,
    34% 37.5%,
    35.7% 37.8%,
    38.6% 40.4%,
    38.2% 33.8%,
    41% 29.2%,
    40.3% 25.4%,
    44.8% 19.3%,
    53.4% 14.9%,
    53.4% 13.9%,
    59.1% 14.1%,
    62.6% 13.7%,
    67.8% 17.6%,
    72% 23.2%,
    73.5% 29.4%,
    73.5% 32.7%,
    72.7% 33%,
    73.7% 34%,
    73.3% 36.7%,
    74% 38.7%,
    76.3% 29.2%,
    75.2% 20.1%,
    73.4% 14.1%,
    70.4% 10%,
    64.5% 7.5%,
    59.4% 7%,
    56.2% 5.7%,
    53% 6%,
    49.1% 6.1%,
    40.5% 8.9%,
    35.8% 15%,
    33.2% 19.3%,
    31.5% 28.4%,
    32% 29.6%,
    31.1% 31.9%
  );
}

.nose-1 {
  background: #2e171a;
  clip-path: polygon(
    61.05% 48%,
    61.35% 48.6%,
    62.05% 48.65%,
    62.35% 47.85%,
    61.8% 47.55%
  );
}

.nose-2 {
  background: #121a36;
  clip-path: polygon(
    56% 48.1%,
    56.85% 47.25%,
    57.65% 47.65%,
    57.15% 48.25%,
    56.45% 48.1%
  );
}

.hair-back {
  background: #131a36;
  clip-path: polygon(
    39.05% 52.05%,
    38.5% 53.5%,
    39.2% 56.55%,
    40.2% 57.5%,
    40.85% 56.45%,
    40.55% 54.05%
  );
}

.shirt {
  background: #001d5b;
  clip-path: polygon(
    -0.5% 103.8%,
    1.5% 91.9%,
    2.6% 91.3%,
    6.4% 85.9%,
    11.1% 82.9%,
    23.7% 77.5%,
    30.1% 74.8%,
    31.8% 72.9%,
    33.7% 72.9%,
    35.7% 71.4%,
    36.9% 70.1%,
    38.6% 69.6%,
    40.8% 72.4%,
    45.7% 74.1%,
    55.4% 74.9%,
    61% 74%,
    63.7% 72.9%,
    64.7% 70.4%,
    65.2% 69.3%,
    67% 71.3%,
    69.3% 72.3%,
    71.5% 74%,
    76.1% 76%,
    89.3% 80%,
    94.7% 82.6%,
    96.9% 85.6%,
    98.9% 91%,
    100.9% 106.6%
  );
}

.face-2 {
  background: #b2799f;
  clip-path: polygon(
    46.2% 14.2%,
    35.3% 42.5%,
    36.9% 51.1%,
    40.6% 53.5%,
    46% 72.7%,
    49.2% 86.9%,
    56.6% 78.6%,
    55.6% 66.3%,
    59.7% 65.5%,
    61.7% 60.1%,
    58.9% 60.3%,
    59.8% 58.4%,
    59.6% 55.5%,
    59.4% 53%,
    61% 53%,
    59.5% 49%,
    61.9% 43.6%,
    60.2% 37.9%,
    60.6% 33%,
    64.2% 33%,
    62.4% 37.5%,
    64.8% 42%,
    68.8% 46.2%,
    69.9% 39.5%,
    69% 34.9%,
    68.4% 31.2%,
    64.5% 31.3%,
    64.9% 17.6%,
    57.3% 17.8%,
    61.9% 11.4%
  );
}

.face-3 {
  background: #0073ff;
  clip-path: polygon(
    37.9% 71%,
    40.8% 66.4%,
    41.3% 59.8%,
    40.3% 57.1%,
    38.7% 52.1%,
    38.7% 49.1%,
    37.1% 49.7%,
    35.1% 48.6%,
    32.7% 44.3%,
    31.8% 39.8%,
    32.1% 35.2%,
    38.9% 16%,
    48.9% 15.1%,
    54% 23.6%,
    52% 27.4%,
    54% 31.4%,
    58.6% 33.8%,
    59.7% 40.6%,
    58.3% 45.1%,
    59.9% 46.7%,
    57.1% 52.8%,
    56.2% 56.4%,
    57.6% 58.6%,
    54.4% 60.4%,
    56.4% 62.4%,
    56.5% 66.3%,
    53.2% 66.2%,
    52.9% 70.7%,
    50.6% 78.2%
  );
}

Final Output

Woman Illustration using HTML and CSS

Written by: Piyush Patil

Code Credits: @alvaromontoro

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love