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
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
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💖
