<!-- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.