<!-- Recreation of Johannes Vermeer's 'Girl With a Pearl Earring' in CSS. Best viewing experience in Chrome & Firefox on desktop -->

<!--  Please support me and the time put into this piece by crediting me in any replications of this code - Louise Flanagan, codepen: louflan, twitter: @lou_flan, lou-flan.com 💜 -->

.canvas
	.side-blur
	.blob
	.blob
	.blob
	.blob
	.band
	.top-band
	.top-yellow-band
	.yellow-band
		.shadow
	.yellow-drape
	.yellow-drape-back
	.band-blur
	.neck
	.ear
	.face
		.temple
		.chin-blur
		.f1
		.f2
		.left-cheek
			.blob
		.lips
			.top-lip
			.teeth
				.teeth-right
			.bottom-lip
				.lip-highlight
		.f4
		.right-cheek
			.blob
		.fh
		.left-eye-hollow
			span
			span
			span
			.left-eye
				span
		.noseblob
		.nose
			span
			span
			span
			.philtrum
		.right-eye-hollow
			span
			span
			.right-eye
				span
	.collar
	.jacket
		.jacket-shading
	.earring
	.side-shadow
View Compiled
* {
	box-sizing: border-box;
}

:root {
	--size: 100;
	--unit: calc((var(--size) / 1095) * 1vmin);
	--shadow: rgb(150, 107, 95);
	--db: hsl(15, 34%, 23%);
	--mb: hsl(22, 22%, 33%);
	--lb: hsl(25, 22%, 47%);
	--dp: hsl(24, 26%, 61%);
	--mp: hsl(25, 58%, 78%);
	--lp: hsl(17, 81%, 85%);
	--h: hsl(22, 64%, 85%);
	--rosy: rgb(247, 197, 205);
	--b: #25547f;
	--blur: blur(calc(1 * var(--unit)));
}

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(14, 14, 14);
}

.canvas {
	height: calc(1095 * var(--unit));
	width: calc(935 * var(--unit));
	position: fixed;
	top: 0%;
	z-index: 1;
	overflow: hidden;

	* {
		position: absolute;
	}
	.side-shadow {
		width: 25%;
		height: 40%;
		background: rgba(0, 0, 0, 0.212);
		transform: rotate(30deg);
		right: 30%;
		top: 25%;
		z-index: 24;
		filter: blur(calc(20 * var(--unit)));
	}
	.earring {
		filter: var(--blur);
		background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0) 50%,
				rgba(0, 0, 0, 0.548) 100%
			),
			radial-gradient(
				circle at 50% 0%,
				rgba(0, 0, 0, 0.164) 70%,
				rgba(255, 255, 255, 0.212) 90%
			),
			radial-gradient(
				circle at 10% 40%,
				rgb(202, 193, 193) 5%,
				rgba(0, 0, 0, 0.521) 30%,
				rgba(41, 41, 41, 0.822) 60%
			),
			linear-gradient(
				0deg,
				rgb(255, 255, 255) 10%,
				rgb(187, 179, 179) 40%,
				rgb(77, 77, 77) 100%
			);
		border-radius: 50%;
		width: 5%;
		height: 4.5%;
		bottom: 43.5%;
		right: 34.5%;
	}

	.collar {
		filter: var(--blur);
		width: 35%;
		height: 30%;
		background: linear-gradient(
			90deg,
			rgb(218, 215, 193) 80%,
			rgb(99, 98, 89) 100%
		);
		box-shadow: inset 0 calc(2 * var(--unit)) calc(10 * var(--unit))
			rgb(99, 98, 89);
		left: 41%;
		bottom: 13.5%;
		border-radius: 83% 5% 0% 0%;
		z-index: -1;
		&::before {
			content: "";
			position: absolute;
			width: 108%;
			height: 100%;
			border-radius: 90% 0% 0% 0%;
			background: rgb(70, 65, 41);
			background: linear-gradient(
				90deg,
				rgb(68, 63, 37) 0%,
				rgb(145, 116, 62) 20%,
				rgb(145, 116, 62) 30%,
				rgb(70, 55, 32) 50%,
				rgb(22, 16, 7) 80%,
				rgb(10, 7, 3) 100%
			);
			top: 10%;
			left: -8%;
			box-shadow: inset calc(40 * var(--unit)) calc(-30 * var(--unit))
				calc(20 * var(--unit)) rgba(51, 42, 20, 0.637);
		}
	}
	.jacket {
		filter: blur(calc(2 * var(--unit)));
		width: 50%;
		height: 40%;
		background: linear-gradient(
			62deg,
			rgb(145, 116, 62) 40%,
			rgb(70, 55, 32) 55%,
			rgb(26, 20, 11) 70%,
			rgb(22, 16, 7) 80%,
			rgb(10, 7, 3) 100%
		);
		left: 35%;
		bottom: -15%;
		border-radius: 100% 100% 0% 0% / 100% 100% 0% 0%;
		transform: rotate(20deg);
		z-index: 20;
		box-shadow: inset calc(10 * var(--unit)) calc(-9 * var(--unit))
				calc(15 * var(--unit)) rgb(59, 52, 32),
			inset calc(25 * var(--unit)) calc(-20 * var(--unit)) calc(18 * var(--unit))
				calc(5 * var(--unit)) rgba(68, 57, 28, 0.637);

		&::after {
			content: "";
			position: absolute;
			width: 15%;
			height: 60%;
			bottom: 0%;
			left: 20%;
			border-radius: 40% / 50%;
			background: linear-gradient(
				260deg,
				rgb(104, 81, 47) 0%,
				rgb(70, 57, 32) 50%
			);
			transform: rotate(-20deg);
			filter: blur(calc(8 * var(--unit)));
			box-shadow: calc(-30 * var(--unit)) calc(40 * var(--unit))
					calc(20 * var(--unit)) rgba(73, 58, 35, 0.89),
				calc(80 * var(--unit)) calc(-50 * var(--unit)) calc(25 * var(--unit))
					calc(5 * var(--unit)) rgb(77, 61, 38),
				calc(150 * var(--unit)) calc(-10 * var(--unit)) calc(30 * var(--unit))
					calc(15 * var(--unit)) rgb(27, 22, 15),
				calc(200 * var(--unit)) calc(30 * var(--unit)) calc(20 * var(--unit))
					calc(35 * var(--unit)) rgb(29, 23, 16);
		}
	}
	.band {
		width: 42%;
		height: 30%;
		filter: var(--blur);
		background: linear-gradient(
				110deg,
				rgba(188, 208, 231, 0.5) 20%,
				rgba(86, 117, 155, 0.5) 40%,
				rgba(30, 58, 85, 0.9) 53%,
				#0b1b2b 70%,
				rgba(0, 0, 0, 1) 100%
			),
			radial-gradient(
				ellipse at 0% 100%,
				rgb(96, 133, 168) 50%,
				rgb(15, 21, 27) 80%
			);
		top: 18%;
		left: 33%;
		border-radius: 70% 100% 50% 0% / 80% 100% 50% 0%;
		overflow: hidden;

		&::after {
			content: "";
			position: absolute;
			width: 50%;
			height: 40%;
			background: rgba(30, 58, 85, 0.9);
			filter: blur(calc(5 * var(--unit)));
			top: 39%;
			left: -6%;
			border-radius: 100% / 100%;
			transform: rotate(32deg);
		}
	}
	.top-band {
		width: 27%;
		height: 5%;
		background: linear-gradient(
			68deg,
			rgb(99, 130, 168) 0%,
			rgb(21, 47, 71) 50%,
			#0b1b2b 80%,
			rgba(0, 0, 0, 1) 100%
		);
		border-radius: 50% 30% 10% 0%;
		z-index: 20;
		transform: rotate(45deg);
		filter: blur(calc(2 * var(--unit)));
		top: 36%;
		right: 27%;
		box-shadow: calc(1 * var(--unit)) calc(2 * var(--unit)) calc(1 * var(--unit))
				var(--db),
			0 calc(3 * var(--unit)) calc(1 * var(--unit)) rgb(53, 33, 33);
	}

	.top-yellow-band {
		filter: blur(calc(2.5 * var(--unit)));
		width: 26%;
		height: 20%;
		top: 11%;
		left: 51%;
		background: rgb(116, 105, 74);
		border-radius: 70% 100% 20% 0% / 70% 100% 20% 0%;
		transform: rotate(-30deg);
		z-index: -20;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			width: 80%;
			height: 80%;
			background: linear-gradient(
				80deg,
				rgb(41, 37, 26) 30%,
				rgb(212, 190, 130) 80%,
				rgb(41, 37, 26) 90%,
				rgba(0, 0, 0, 1) 100%
			);
			border-radius: inherit;
			right: 0%;
			bottom: 15%;
			box-shadow: inset 0 calc(3 * var(--unit)) calc(1 * var(--unit))
				rgb(77, 71, 47);
		}

		&::after {
			content: "";
			position: absolute;
			width: 80%;
			height: 80%;
			background: linear-gradient(
				80deg,
				rgb(41, 37, 26) 60%,
				rgb(228, 205, 141) 70%,
				rgb(41, 37, 26) 90%,
				rgba(0, 0, 0, 1) 100%
			);
			border-radius: inherit;
			right: 0%;
			bottom: -10%;
			box-shadow: inset 0 calc(3 * var(--unit)) calc(1 * var(--unit))
				rgb(77, 71, 47);
		}
	}
	.yellow-band {
		width: 30%;
		height: 18%;
		filter: var(--blur);
		background: rgb(228, 205, 141);
		background: linear-gradient(
				110deg,
				rgba(228, 205, 141, 0.8) 20%,
				rgba(129, 116, 79, 0.8) 65%,
				rgba(41, 37, 26, 0.5) 80%,
				rgba(0, 0, 0, 1) 100%
			),
			radial-gradient(
				circle at bottom center,
				rgba(253, 233, 176, 0.8),
				rgba(185, 171, 131, 0.8) 60%,
				rgba(34, 30, 20, 0.8) 100%
			);
		z-index: -1;
		left: 45%;
		top: 15%;
		border-radius: 80% 100% 20% 0% / 80% 100% 20% 0%;
		box-shadow: inset calc(-3 * var(--unit)) calc(3 * var(--unit))
			calc(5 * var(--unit)) rgba(41, 37, 26, 0.5);
		overflow: hidden;
		.shadow {
			width: 105%;
			height: 80%;
			border-radius: inherit;
			background: linear-gradient(
				110deg,
				rgba(228, 205, 141, 0.8) 20%,
				rgba(129, 116, 79, 0.8) 65%,
				rgba(41, 37, 26, 0.5) 80%
			);
			box-shadow: inset calc(-15 * var(--unit)) calc(5 * var(--unit))
					calc(5 * var(--unit)) rgb(53, 48, 33),
				calc(80 * var(--unit)) 0 calc(10 * var(--unit)) rgb(51, 46, 32),
				calc(60 * var(--unit)) calc(-10 * var(--unit)) calc(10 * var(--unit))
					rgb(90, 81, 57);
			top: 15%;
			left: -5%;
			transform: rotate(10deg);
		}
	}
	.yellow-drape {
		filter: var(--blur);
		width: 10%;
		height: 61%;
		background: linear-gradient(
			85deg,
			rgb(129, 116, 79) 0%,
			rgb(228, 205, 141) 40%,
			rgb(65, 58, 41) 60%
		);
		right: 15%;
		top: 20%;
		z-index: 30;
		border-radius: 10% 100% 20% 20% / 5% 100% 15% 15%;
		transform: rotate(-3deg);
		box-shadow: inset calc(4 * var(--unit)) calc(2 * var(--unit))
				calc(10 * var(--unit)) rgb(39, 35, 24),
			inset calc(-4 * var(--unit)) calc(2 * var(--unit)) calc(10 * var(--unit))
				rgb(39, 35, 24),
			calc(-4 * var(--unit)) calc(-4 * var(--unit)) calc(10 * var(--unit))
				rgb(39, 35, 24),
			calc(6 * var(--unit)) calc(0 * var(--unit)) calc(10 * var(--unit))
				rgba(39, 34, 21, 0.877);
		overflow: hidden;
		&::before {
			content: "";
			filter: var(--blur);
			position: absolute;
			background: linear-gradient(
				100deg,
				rgba(14, 18, 22, 0.856) 0%,
				// rgba(139, 170, 206, 0.6) 20%,
				rgba(73, 93, 131, 0.8) 40%,
				// rgba(139, 170, 206, 0.6) 60%,
				rgba(41, 52, 65, 0.5) 80%
			);
			width: 110%;
			height: 18%;
			z-index: -10;
			bottom: -2%;
			transform: rotate(-10deg);
		}
		&::after {
			content: "";
			filter: blur(calc(10 * var(--unit)));
			position: absolute;
			background: rgb(46, 38, 13);
			width: 10%;
			height: 50%;
			z-index: -10;
			bottom: 60%;
			left: 30%;
			transform: rotate(-5deg);
			box-shadow: calc(-4 * var(--unit)) calc(150 * var(--unit))
				calc(1 * var(--unit)) rgb(46, 38, 13);
		}
	}
	.yellow-drape-back {
		filter: var(--blur);
		width: 10%;
		height: 55%;
		z-index: -10;
		background: linear-gradient(
			85deg,
			rgb(129, 116, 79) 0%,
			rgb(73, 93, 131) 40%,
			rgb(31, 38, 46) 60%,
			rgb(0, 0, 0) 100%
		);
		right: 10%;
		top: 20%;
		border-radius: 10% 100% 20% 20% / 5% 100% 15% 15%;
		transform: rotate(-10deg);
		box-shadow: inset calc(2 * var(--unit)) calc(2 * var(--unit))
				calc(10 * var(--unit)) rgb(39, 35, 24),
			inset calc(-2 * var(--unit)) calc(2 * var(--unit)) calc(10 * var(--unit))
				rgb(22, 20, 13),
			calc(-4 * var(--unit)) calc(-4 * var(--unit)) calc(10 * var(--unit))
				rgb(39, 35, 24);
		overflow: hidden;
		&::before {
			content: "";
			position: absolute;
			background: linear-gradient(
				100deg,
				rgba(139, 170, 206, 0.8) 0%,
				rgba(73, 93, 131, 0.8) 40%,
				rgba(41, 52, 65, 0.5) 80%
			);

			width: 110%;
			height: 15%;
			z-index: -10;
			bottom: 0;
			transform: rotate(-10deg);
		}
	}

	.neck {
		background: linear-gradient(
			70deg,
			var(--mp) 10%,
			rgb(131, 95, 81) 30%,
			rgb(82, 57, 47) 50%,
			rgb(31, 21, 18) 100%
		);
		filter: blur(calc(2 * var(--unit)));
		width: 20%;
		height: 20%;
		z-index: 30;
		left: 48%;
		top: 50%;
		z-index: -1;
		transform: rotate(-28deg);
	}

	.side-blur {
		background: var(--db);
		filter: blur(calc(20 * var(--unit)));
		width: 9%;
		height: 13%;
		left: 55%;
		top: 40%;
		z-index: 20;
		border-radius: 20%;
		transform: rotate(20deg);
	}
	.blob:nth-child(2) {
		background: var(--lp);
		filter: blur(calc(15 * var(--unit)));
		width: 9%;
		height: 11%;
		transform: rotate(20deg);
		left: 42%;
		top: 40%;
		z-index: 2;
		border-radius: 20%;
	}
	.blob:nth-child(3) {
		background: var(--h);
		filter: blur(calc(10 * var(--unit)));
		width: 10%;
		height: 6%;
		transform: rotate(20deg);
		left: 35%;
		top: 30%;
		z-index: 2;
		border-radius: 50%;
	}
	.blob:nth-child(4) {
		background: linear-gradient(90deg, rgb(31, 44, 63) 20%, black);
		filter: blur(calc(10 * var(--unit)));
		width: 22%;
		height: 18.5%;
		transform: rotate(40deg);
		left: 56%;
		top: 26%;
		z-index: 21;
		border-radius: 0% 50% 0% 0%;

		&::after {
			content: "";
			position: absolute;
			width: 40%;
			filter: blur(calc(2 * var(--unit)));
			height: 35%;
			border-radius: 100% 0% 0% 0% / 100% 0% 0% 0%;
			background: linear-gradient(90deg, rgba(30, 58, 85, 0.9), rgb(31, 44, 63));
			bottom: 3%;
			left: -40%;
		}
	}

	.ear {
		width: 9%;
		height: 5.7%;
		filter: var(--blur);
		transform: rotate(-43deg);
		background: linear-gradient(170deg, rgb(150, 109, 96) 50%, rgb(66, 47, 41));
		right: 32%;
		top: 44%;
		z-index: 15;
		border-radius: 32%;
		box-shadow: 0 calc(2 * var(--unit)) rgb(87, 66, 57);
		&::before {
			content: "";
			position: absolute;
			background: rgb(82, 56, 45);
			filter: blur(calc(2 * var(--unit)));
			width: 60%;
			height: 30%;
			left: 20%;
			top: 20%;
			border-radius: 50%;
		}
		&::after {
			content: "";
			position: absolute;
			background: rgb(150, 109, 96);
			transform: rotate(-20deg);
			width: 80%;
			height: 40%;
			left: 0%;
			top: 0%;
			border-radius: 50%;
		}
	}

	.face {
		width: 35%;
		height: 32%;
		border-radius: 30%;
		left: 30%;
		top: 29%;
		overflow: hidden;

		.temple {
			background: linear-gradient(
				90deg,
				var(--mp) 0%,
				rgb(185, 144, 132) 20%,
				rgb(150, 109, 96) 30%
			);
			filter: blur(calc(4 * var(--unit)));
			width: 25%;
			height: 20%;
			z-index: 3;
			right: 23%;
			top: 20%;
			transform: rotate(30deg);
		}

		.chin-blur {
			width: 9%;
			height: 15%;
			background: rgba(163, 121, 105, 0.836);
			border-radius: 30%;
			transform: rotate(-40deg);
			left: 32%;
			bottom: 5%;
			z-index: 10;
			filter: blur(calc(4 * var(--unit)));
			&::after {
				content: "";
				position: absolute;
				background: radial-gradient(
					circle at -10% 0%,
					var(--mp) 0%,
					rgba(163, 121, 105, 0.836) 50%
				);
				width: 150%;
				height: 50%;
				transform: rotate(30deg);
				bottom: 0%;
				left: -70%;
			}
		}

		//* top of face at headband
		.f1 {
			background: var(--lp);
			background: linear-gradient(10deg, var(--lp) 0%, var(--mp) 100%);
			width: 60%;
			height: 36%;
			left: 5%;
			top: 5%;
			border-radius: 70% 80% 100% 50% / 100% 90% 100% 100%;
			transform: rotate(28deg);
			filter: var(--blur);
			box-shadow: inset 0 calc(2 * var(--unit)) calc(8 * var(--unit)) var(--db),
				inset calc(1 * var(--unit)) calc(1 * var(--unit)) calc(1 * var(--unit))
					var(--db);
		}
		//* headband curve
		.f2 {
			background: var(--mp);
			filter: var(--blur);
			z-index: -1;
			width: 85%;
			height: 58%;
			left: 5%;
			top: 14%;
			border-radius: 30% 100% 100% 50% / 20% 100% 100% 100%;
			transform: rotate(30deg);
		}
		//* left cheek
		.left-cheek {
			background: var(--lp);
			background: linear-gradient(0deg, var(--lp) 0%, var(--h) 15%, var(--mp) 70%);
			filter: var(--blur);
			width: 80%;
			height: 40%;
			left: -13%;
			top: 36%;
			border-radius: 100% 0% 80% 100%;
			transform: rotate(75deg);
		}

		//* chin
		.f4 {
			background: var(--mp);
			background: radial-gradient(
				circle at 0% 50%,
				var(--lp) 35%,
				rgb(158, 104, 87) 100%
			);
			width: 39%;
			height: 30%;
			left: 13%;
			top: 68%;
			border-radius: 30% 0% 50% 45% / 30% 0% 50% 58%;
			transform: rotate(25deg);
			filter: var(--blur);
		}
		//* right piece of face
		.right-cheek {
			background: linear-gradient(75deg, var(--mp) 10%, var(--shadow) 50%);
			width: 45%;
			height: 50%;
			left: 47%;
			top: 30%;
			border-radius: 0% 50%;
			transform: rotate(42deg);
			filter: var(--blur);

			&::after {
				content: "";
				position: absolute;
				width: 150%;
				height: 50%;
				background: rgba(112, 71, 58, 1);
				background: linear-gradient(
					115deg,
					rgb(189, 145, 130) 0%,
					var(--shadow) 40%
				);
				bottom: -10%;
				transform: rotate(-80deg);
				border-radius: 80% 0% 40% 60% / 50%;
			}

			.blob:nth-child(1) {
				background: linear-gradient(75deg, var(--mp) 10%, var(--shadow) 50%);
				-webkit-filter: blur(calc(5 * var(--unit)));
				filter: blur(calc(5 * var(--unit)));
				width: 89%;
				height: 156%;
				-webkit-transform: rotate(-10deg);
				transform: rotate(-3deg);
				left: 2%;
				top: -5%;
				z-index: 2;
				border-radius: 5% 89% 67% 10%;
			}
		}

		//* ----------------- LIPS ----------------- *//
		.lips {
			width: 50%;
			height: 30%;
			left: 10%;
			border: solid calc(3 * var(--unit)) transparent;
			bottom: 5%;
			z-index: 5;
			filter: var(--blur);

			.top-lip {
				width: 52%;
				height: 20%;
				filter: var(--blur);
				background: linear-gradient(
					3deg,
					#9b372a 20%,
					#a54033 30%,
					transparent 55%
				);
				transform: rotate(15deg);
				top: 11%;
				left: 5%;
				z-index: 5;
				border-radius: 100% 100% 20% 20% / 100%;
				box-shadow: 0 calc(1 * var(--unit)) rgb(87, 14, 14);
				&::before {
					content: "";
					position: absolute;
					left: 20%;
					top: 36%;
					width: 72%;
					height: 50%;
					background: #a75449;
					background: linear-gradient(20deg, #a55045 10%, transparent 50%);
					border-radius: 30%;
					transform: rotate(4deg);
					box-shadow: calc(-3 * var(--unit)) calc(3 * var(--unit)) #a75449;
				}
				&::after {
					content: "";
					position: absolute;
					left: 2%;
					top: 38%;
					width: 14%;
					height: 60%;
					background: linear-gradient(
						0deg,
						#7c3930 0%,
						#a75449 50%,
						transparent 100%
					);
					filter: var(--blur);
					border-radius: 50% 50% 50% 10%;
				}
			}

			.teeth {
				width: 28%;
				height: 16%;
				background: rgb(219, 188, 148);
				background: linear-gradient(
					190deg,
					rgb(201, 168, 125) 65%,
					rgb(155, 68, 57) 75%,
					rgb(44, 19, 15) 100%
				);
				top: 24%;
				left: 18%;
				border-radius: 0% 100% 0% 50% / 0% 100% 0% 100%;
				z-index: 2;
				overflow: hidden;
				box-shadow: calc(-4 * var(--unit)) calc(1 * var(--unit))
						calc(-2 * var(--unit)) calc(1 * var(--unit)) rgba(100, 32, 23, 0.5),
					calc(-2 * var(--unit)) calc(1 * var(--unit)) calc(3 * var(--unit))
						calc(1 * var(--unit)) rgb(116, 53, 44),
					calc(-6 * var(--unit)) calc(1 * var(--unit)) calc(3 * var(--unit))
						calc(2 * var(--unit)) rgb(133, 51, 40),
					calc(-7 * var(--unit)) calc(6 * var(--unit)) calc(3 * var(--unit))
						calc(1 * var(--unit)) hsla(7, 82%, 36%, 0.5),
					calc(2 * var(--unit)) 0 calc(1 * var(--unit)) calc(1 * var(--unit))
						hsla(7, 72%, 28%, 0.5),
					calc(2 * var(--unit)) calc(2 * var(--unit)) calc(3 * var(--unit))
						calc(3 * var(--unit)) hsla(7, 98%, 22%, 0.5);

				.teeth-right {
					width: 50%;
					height: 100%;
					right: 0%;
					background: red;
					background: linear-gradient(
						100deg,
						rgb(102, 52, 44) 0%,
						rgb(230, 203, 169) 45%,
						rgb(155, 68, 57) 65%,
						rgb(102, 52, 44) 80%
					);
					&::after {
						content: "";
						position: absolute;
						width: 55%;
						right: 30%;
						height: 100%;
						background: rgb(192, 168, 135);
						border-radius: 0% 0% 50% 30%;
						box-shadow: inset calc(0.5 * var(--unit)) calc(-0.5 * var(--unit))
								rgb(141, 124, 95),
							inset calc(-0.5 * var(--unit)) calc(-0.5 * var(--unit))
								rgb(172, 151, 114);
					}
				}

				&::before {
					content: "";
					position: absolute;
					width: 35%;
					height: 100%;
					background: black;
					background: radial-gradient(
						circle at 80% 0%,
						rgb(104, 74, 49) 0%,
						rgb(204, 181, 152) 45%,
						rgb(155, 68, 57) 65%,
						rgb(102, 52, 44) 80%
					);
					top: 0%;
					border-radius: 30%;
					box-shadow: inset calc(2 * var(--unit)) calc(1 * var(--unit))
						rgb(61, 18, 18);
				}
				&::after {
					content: "";
					position: absolute;
					width: 28%;
					height: 85%;
					background: rgb(194, 174, 149);
					left: 30%;
					top: 0%;
					border-radius: 0% 0% 50% 30%;
					box-shadow: inset calc(0.5 * var(--unit)) calc(-0.5 * var(--unit))
							rgb(184, 165, 132),
						inset calc(-0.5 * var(--unit)) calc(-0.5 * var(--unit)) rgb(172, 151, 114);
				}
			}

			.bottom-lip {
				width: 42%;
				height: 40%;
				background: radial-gradient(
					60% 60% at 35% 20%,
					rgb(161, 71, 65) 50%,
					rgb(153, 59, 55) 70%,
					rgb(163, 80, 74) 100%
				);
				top: 25%;
				left: 8%;
				border-radius: 30% 30% 80% 70%/ 30% 30% 100% 100%;
				transform: rotate(12deg);
				overflow: hidden;
				box-shadow: calc(2 * var(--unit)) calc(1 * var(--unit))
						calc(4 * var(--unit)) calc(2 * var(--unit)) hsla(25, 22%, 54%, 0.5),
					calc(4 * var(--unit)) calc(1 * var(--unit)) calc(4 * var(--unit))
						calc(2 * var(--unit)) hsla(25, 22%, 54%, 0.5),
					calc(10 * var(--unit)) calc(5 * var(--unit)) calc(6 * var(--unit))
						calc(3 * var(--unit)) hsla(25, 22%, 54%, 0.4);

				.lip-highlight {
					width: 55%;
					height: 45%;
					left: 2%;
					border-radius: 30% 10%;
					filter: var(--blur);
					top: 57%;
					background: rgba(226, 187, 187, 0.356);

					&::after {
						content: "";
						position: absolute;
						right: 5%;
						top: -10%;
						width: 15%;
						height: 60%;
						border-radius: 50%;
						background: rgba(238, 231, 231, 0.781);
						filter: blur(calc(2 * var(--unit)));
						box-shadow: calc(-10 * var(--unit)) calc(1 * var(--unit))
							calc(1 * var(--unit)) calc(3 * var(--unit)) rgb(212, 158, 158);
					}

					&::before {
						content: "";
						position: absolute;
						left: 30%;
						top: 5%;
						width: 20%;
						height: 50%;
						border-radius: 50%;
						background: rgba(243, 231, 231, 0.788);
						filter: blur(calc(2 * var(--unit)));
					}
				}
			}
		}

		.noseblob {
			width: 22%;
			height: 15%;
			background: linear-gradient(
				-60deg,
				rgba(240, 204, 178, 0.8) 40%,
				var(--lb) 70%
			);
			left: 31%;
			top: 21%;
			z-index: 1;
			filter: blur(calc(5 * var(--unit)));
			border-radius: 30%;
			&::after {
				content: "";
				position: absolute;
				left: -100%;
				top: -45%;
				width: 20%;
				height: 30%;
				background: rgb(216, 184, 163);
			}
		}
		//* ----------------- NOSE ----------------- *//
		.nose {
			background: linear-gradient(-80deg, transparent 40%, var(--dp) 100%);
			transform: rotate(25deg);
			width: 20%;
			height: 45%;
			border-radius: 20% 20% 50% 100% / 20%;
			left: 22%;
			top: 22%;
			filter: var(--blur);

			&::before {
				content: "";
				position: absolute;
				width: 80%;
				border-radius: 30%;
				left: 0%;
				height: 12%;
				background: var(--mb);
				filter: var(--blur);
				bottom: 4%;
				transform: rotate(8deg);
			}

			&::after {
				content: "";
				position: absolute;
				width: 35%;
				height: 95%;
				background: var(--h);
				filter: blur(calc(3 * var(--unit)));
				left: -34%;
				border-radius: 0% 50% 0% 80% / 0% 50% 0% 100%;
			}

			span:nth-child(1) {
				opacity: 0.5;
				width: 80%;
				height: 100%;
				left: -35%;
				transform: rotate(-30deg);
				filter: blur(calc(4 * var(--unit)));
				background: linear-gradient(
					-40deg,
					var(--mb) 40%,
					var(--dp) 60%,
					transparent 61%
				);
				border-radius: 50%;
				box-shadow: calc(1 * var(--unit)) calc(1 * var(--unit))
					calc(2 * var(--unit)) calc(2 * var(--unit)) var(--mb);
			}
			span:nth-child(2) {
				//nostril
				width: 100%;
				height: 20%;
				left: 0%;
				bottom: 8%;
				transform: rotate(-10deg);
				background: var(--dp);
				filter: blur(calc(2 * var(--unit)));
				background: linear-gradient(
					-20deg,
					var(--db) 0%,
					rgb(54, 22, 9) 10%,
					rgb(170, 134, 120) 70%
				);
				border-radius: 90% 80% 50% 10% / 100%;
				box-shadow: inset calc(-1 * var(--unit)) 0 rgb(0, 0, 0),
					inset calc(-3 * var(--unit)) 0 rgb(51, 19, 6);
				&::after {
					content: "";
					position: absolute;
					width: 80%;
					height: 20%;
					background: linear-gradient(
						90deg,
						rgb(29, 10, 2) 0%,
						rgb(51, 19, 6) 20%,
						rgba(68, 25, 8, 0.3) 23%
					); //! SHADOWING AROUND NOSTRIL
					box-shadow: calc(-10 * var(--unit)) calc(3 * var(--unit))
							rgba(51, 19, 6, 0.5),
						calc(10 * var(--unit)) calc(20 * var(--unit)) calc(1 * var(--unit))
							calc(15 * var(--unit)) rgba(189, 143, 127, 0.3);
					border-radius: 50%;
					left: 28%;
					bottom: 0%;
				}
			}
			.philtrum {
				width: 85%;
				height: 35%;
				bottom: -20%;
				border-radius: 0% 50% 0% 0%;
				background: linear-gradient(90deg, rgb(141, 103, 91), transparent 90%),
					linear-gradient(0deg, rgb(141, 103, 91) 0%, transparent 60%);
				left: 46%;
				z-index: -3;
				transform: rotate(-15deg);
				filter: blur(calc(2 * var(--unit)));
			}
		}
		//* ----------------- EYES ----------------- *//
		.left-eye-hollow {
			width: 18%;
			height: 22%;
			left: 1%;
			top: 15%;
			span:nth-child(1) {
				filter: blur(calc(1.5 * var(--unit)));
				background: linear-gradient(95deg, var(--h) 0%, hsla(20, 33%, 66%, 1) 80%);
				border-radius: 20% 100% 30% 30%;
				width: 80%;
				height: 100%;
				left: 30%;
				&::after {
					content: "";
					position: absolute;
					left: 20%;
					top: 93%;
					width: 70%;
					height: 7%;
					filter: blur(calc(4 * var(--unit)));
					background: var(--lb);
					transform: rotate(20deg);
					border-radius: 0% 0% 50% 50%;
				}
			}
			span:nth-child(2) {
				//top eyelid
				background: radial-gradient(
					hsl(21, 28%, 33%) 10%,
					hsl(16, 55%, 84%) 30%,
					hsl(21, 31%, 31%) 90%
				);
				width: 66%;
				height: 50%;
				border-radius: 30% 60% 0% 65%;
				left: 33%;
				top: 30%;
				filter: blur(calc(0.8 * var(--unit)));
				box-shadow: calc(1 * var(--unit)) calc(-2 * var(--unit))
						calc(4 * var(--unit)) calc(1 * var(--unit)) var(--lb),
					calc(-2 * var(--unit)) calc(12 * var(--unit)) calc(3 * var(--unit))
						hsl(19, 25%, 56%);
			}
			span:nth-child(3) {
				background: radial-gradient(
					hsl(19, 17%, 26%) 0%,
					hsl(17, 55%, 83%) 30%,
					hsl(20, 23%, 46%) 100%
				);
				// background: var(--lp);
				width: 70%;
				height: 42%;
				border-radius: 50% 80% 30% 65%;
				box-shadow: calc(1 * var(--unit)) calc(1 * var(--unit))
					calc(4 * var(--unit)) calc(1 * var(--unit)) var(--lb);
				left: 30%;
				top: 45%;
				filter: blur(calc(0.8 * var(--unit)));
				transform: rotate(8deg);
			}
			.left-eye {
				background: linear-gradient(
					90deg,
					rgb(245, 243, 223) 20%,
					rgba(235, 222, 215, 0.3) 80%
				);
				filter: blur(calc(0.5 * var(--unit)));
				box-shadow: inset 0 0 calc(2 * var(--unit)) calc(1 * var(--unit))
						rgb(133, 104, 97),
					calc(-1 * var(--unit)) calc(-1 * var(--unit)) calc(2 * var(--unit)) 0
						var(--db),
					calc(-2 * var(--unit)) calc(-2 * var(--unit)) calc(2 * var(--unit)) 0
						var(--db);
				top: 46%;
				left: 35%;
				width: 62%;
				height: 33%;
				border-radius: 50% 100% 30% 90% / 60% 100% 30% 100%;
				transform: rotate(5deg);
				overflow: hidden;
				span:nth-child(1) {
					filter: blur(calc(0.5 * var(--unit)));
					background: radial-gradient(circle at 22% 25%, white, transparent 17%),
						radial-gradient(
							circle at 55% 45%,
							black,
							#4a4e4c 40%,
							#343a31 60%,
							rgb(31, 31, 31) 70%
						);
					width: 80%;
					height: 105%;
					left: 35%;
					border-radius: 50%;
				}
			}
		}

		//* right eye hollow
		.right-eye-hollow {
			z-index: 3;
			width: 30%;
			height: 20%;
			left: 30%;
			top: 25%;
			span:nth-child(1) {
				background: linear-gradient(
					70deg,
					rgb(197, 152, 134) 0%,
					rgb(236, 198, 182) 40%,
					hsl(20, 20%, 45%) 80%
				);
				box-shadow: calc(5 * var(--unit)) calc(-2 * var(--unit))
						calc(3 * var(--unit)) hsla(15, 34%, 23%, 0.2),
					calc(10 * var(--unit)) calc(-2 * var(--unit)) calc(5 * var(--unit))
						hsla(15, 34%, 23%, 0.3);
				filter: blur(calc(1 * var(--unit)));
				width: 62%;
				transform: rotate(22deg);
				height: 45%;
				top: 12%;
				left: 24%;
				border-radius: 50% 60% 30% 30% / 100% 100% 20% 20%;
			}
			//bottom lid
			span:nth-child(2) {
				background: linear-gradient(
					0deg,
					rgb(206, 173, 160) 20%,
					rgb(199, 159, 143) 100%
				);
				filter: var(--blur);
				width: 52%;
				transform: rotate(16deg);
				height: 30%;
				top: 41%;
				left: 21%;
				border-radius: 50% 50% 90% 80% / 100% 100% 90% 100%;
				box-shadow: inset calc(-2 * var(--unit)) 0 calc(1 * var(--unit))
						hsla(15, 34%, 23%, 0.8),
					calc(10 * var(--unit)) 0 calc(5 * var(--unit)) hsla(15, 34%, 23%, 0.8),
					calc(7 * var(--unit)) calc(3 * var(--unit)) calc(6 * var(--unit))
						calc(1 * var(--unit)) var(--lb),
					calc(15 * var(--unit)) calc(6 * var(--unit)) calc(8 * var(--unit)) 0
						var(--lb),
					calc(15 * var(--unit)) calc(-6 * var(--unit)) calc(6 * var(--unit))
						calc(1 * var(--unit)) hsla(15, 34%, 23%, 0.8);
				&::after {
					content: "";
					position: absolute;
					width: 10%;
					height: 15%;
					background: var(--mp);
					border: calc(1 * var(--unit)) solid var(--mb);
					border-radius: 50%;
					left: -3%;
					bottom: 46%;
				}
			}

			.right-eye {
				background: linear-gradient(
					90deg,
					rgb(245, 243, 223) 10%,
					rgba(235, 222, 215, 0.3) 80%
				);
				filter: blur(calc(0.5 * var(--unit)));
				box-shadow: inset 0 calc(1 * var(--unit)) calc(2 * var(--unit))
						calc(1 * var(--unit)) rgba(51, 38, 25, 0.63),
					inset calc(-5 * var(--unit)) 0 calc(5 * var(--unit)) calc(1 * var(--unit))
						rgba(51, 38, 25, 0.822),
					calc(1.5 * var(--unit)) calc(-0.5 * var(--unit)) calc(1 * var(--unit))
						calc(1 * var(--unit)) rgba(75, 49, 37, 0.822);
				top: 30%;
				left: 25%;
				width: 48%;
				height: 35%;
				border-radius: 70% 100% 60% 90% / 80% 100% 80% 80%;
				transform: rotate(12deg);
				overflow: hidden;
				span:nth-child(1) {
					filter: blur(calc(0.5 * var(--unit)));
					background: radial-gradient(circle at 5% 25%, white, transparent 20%),
						radial-gradient(
							circle at 45% 35%,
							black,
							#4a4e4c 50%,
							#343a31 60%,
							rgb(31, 31, 31) 70%
						);
					width: 60%;
					height: 100%;
					left: 38%;
					border-radius: 50%;
				}
			}
		}
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.