<!DOCTYPE html>
<html>
<head>
<title>Red Panda using HTML and CSS only</title>
</head>
<body>

<div class="caption">
    <strong>RED PANDA</strong>
    <span>CSS illustration</span>
  </div>
</div>

</body>
</html>

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

body {
  background: #d8c5ad;
}

.scene {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;

background:
    radial-gradient(
      ellipse at 65% 42%,
      #f5e8d8 0%,
      #e4d2bd 38%,
      #c5ad92 100%
    );
}

/* ------------------------------------------------ */
/* Ground                                            */
/* ------------------------------------------------ */

.ground {
  position: absolute;
  left: -10%;
  bottom: -14%;
  width: 120%;
  height: 38%;

border-radius: 50% 50% 0 0;

background:
    radial-gradient(
      ellipse at 50% 10%,
      rgba(120,95,70,.18),
      transparent 55%
    ),
    linear-gradient(
      to bottom,
      #8a735d,
      #665445
    );

box-shadow:
    inset 0 14px 35px rgba(40,25,15,.14);
}

/* ------------------------------------------------ */
/* Panda                                             */
/* ------------------------------------------------ */

.panda {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 480px;
  height: 470px;
  transform: translateX(-50%);
  animation: breathing 4s ease-in-out infinite;
}

@keyframes breathing {
  0%,100% {
    transform: translateX(-50%) translateY(0) scaleY(1);
  }

50% {
    transform: translateX(-50%) translateY(2px) scaleY(1.015);
  }
}

/* ------------------------------------------------ */
/* Tail                                             */
/* ------------------------------------------------ */

.tail {
  position: absolute;
  right: -30px;
  bottom: 105px;
  width: 205px;
  height: 150px;

border-radius: 70% 45% 55% 70%;

transform:
    rotate(-9deg)
    skewY(-4deg);

background:
    repeating-linear-gradient(
      90deg,
      #b5532e 0 26px,
      #78432c 26px 52px
    );

box-shadow:
    inset -14px -15px 25px rgba(45,20,12,.35),
    inset 12px 10px 20px rgba(255,190,130,.08),
    15px 20px 25px rgba(42,25,15,.22);

z-index: 0;
}

.tail::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 35px;
  width: 42px;
  height: 76px;
  border-radius: 50%;
  background: #6f3928;
  filter: blur(2px);
}

/* ------------------------------------------------ */
/* Body                                             */
/* ------------------------------------------------ */

.body {
  position: absolute;
  left: 125px;
  bottom: 60px;
  width: 275px;
  height: 270px;

border-radius: 46% 48% 43% 45%;

background:
    radial-gradient(
      ellipse at 35% 18%,
      #d77446 0%,
      #b95632 40%,
      #833e2b 78%,
      #5d2e23 100%
    );

box-shadow:
    inset -25px -30px 50px rgba(40,18,12,.4),
    inset 20px 10px 30px rgba(255,180,120,.12),
    18px 28px 35px rgba(30,20,14,.28);

z-index: 2;
}

/* Fur texture */

.body::before {
  content: "";
  position: absolute;
  inset: 15px;

border-radius: inherit;

opacity: .13;

background:
    repeating-linear-gradient(
      105deg,
      transparent 0 7px,
      rgba(255,255,255,.15) 8px,
      transparent 10px
    );

mix-blend-mode: overlay;
}

/* Chest */

.chest {
  position: absolute;
  left: 58px;
  top: 48px;
  width: 160px;
  height: 200px;

border-radius: 45%;

background:
    radial-gradient(
      ellipse at 50% 20%,
      #c66d43,
      #9c4b31 62%,
      #6f3426
    );

opacity: .55;

filter: blur(1px);
}

/* ------------------------------------------------ */
/* Legs                                             */
/* ------------------------------------------------ */

.leg {
  position: absolute;
  bottom: -25px;
  width: 85px;
  height: 125px;
  border-radius: 48%;

background:
    linear-gradient(
      110deg,
      #8c3e2b,
      #57291f
    );

box-shadow:
    inset 10px 0 15px rgba(255,170,120,.08),
    7px 15px 15px rgba(35,20,12,.25);
}

.front-leg {
  right: 35px;
}

.back-leg {
  left: 34px;
  transform: rotate(5deg);
}

/* ------------------------------------------------ */
/* Head                                             */
/* ------------------------------------------------ */

.head {
  position: absolute;
  left: 104px;
  top: 50px;
  width: 285px;
  height: 245px;

z-index: 5;
}

/* Face silhouette */

.face {
  position: absolute;
  inset: 15px 0 0;

border-radius:
    47% 53% 50% 50%
    / 43% 43% 57% 57%;

background:
    radial-gradient(
      circle at 45% 35%,
      #d87b4c 0%,
      #b95734 48%,
      #743526 83%,
      #4f271e 100%
    );

box-shadow:
    inset -18px -22px 35px rgba(40,15,10,.38),
    inset 20px 10px 30px rgba(255,195,145,.12),
    12px 18px 25px rgba(30,20,14,.2);
}

/* Fur highlights */

.face::before {
  content: "";
  position: absolute;
  inset: 8px;

border-radius: inherit;

background:
    radial-gradient(
      ellipse at 50% 25%,
      rgba(255,210,165,.12),
      transparent 48%
    );

pointer-events: none;
}

/* ------------------------------------------------ */
/* Ears                                             */
/* ------------------------------------------------ */

.ear {
  position: absolute;
  top: 0;

width: 92px;
  height: 103px;

border-radius: 58% 42% 50% 48%;

background:
    radial-gradient(
      ellipse at 45% 42%,
      #7c3b2b 0%,
      #57291f 62%,
      #321b16 100%
    );

box-shadow:
    inset 7px 8px 14px rgba(255,150,100,.08),
    inset -12px -12px 18px rgba(20,10,7,.4),
    8px 10px 17px rgba(30,18,12,.2);

z-index: -1;
}

.left-ear {
  left: 4px;
  transform: rotate(-24deg);
}

.right-ear {
  right: 4px;
  transform: rotate(24deg);
}

.ear::after {
  content: "";
  position: absolute;
  inset: 20px;

border-radius: 50%;

background:
    radial-gradient(
      circle at 50% 50%,
      #3b211a,
      #6a3226
    );

opacity: .8;
}

/* ------------------------------------------------ */
/* Cheeks                                           */
/* ------------------------------------------------ */

.cheek {
  position: absolute;
  top: 84px;
  width: 95px;
  height: 105px;

border-radius: 50%;

background:
    radial-gradient(
      ellipse at 50% 35%,
      #e29a6b,
      #c7754e 55%,
      #a04c33 100%
    );

opacity: .82;

filter: blur(.4px);
}

.left-cheek {
  left: 18px;
}

.right-cheek {
  right: 18px;
}

/* ------------------------------------------------ */
/* Eyes                                             */
/* ------------------------------------------------ */

.eye {
  position: absolute;
  top: 84px;

width: 50px;
  height: 32px;

background: #241612;

border-radius: 50%;

box-shadow:
    inset 0 -5px 8px rgba(0,0,0,.45),
    0 2px 4px rgba(0,0,0,.2);

overflow: hidden;
}

.left-eye {
  left: 53px;
}

.right-eye {
  right: 53px;
}

.eye::before {
  content: "";

position: absolute;
  left: 8px;
  top: 8px;
  width: 23px;
  height: 10px;

border-radius: 50%;

background:
    rgba(215,130,80,.26);

filter: blur(2px);
}

.eye span {
  position: absolute;
  left: 19px;
  top: 7px;

width: 14px;
  height: 14px;

border-radius: 50%;

background:
    radial-gradient(
      circle at 35% 30%,
      #fff 0 10%,
      #d8b58e 11% 18%,
      #3a2115 19% 60%,
      #080706 62%
    );

box-shadow:
    0 0 3px rgba(255,230,190,.35);
}

/* ------------------------------------------------ */
/* Muzzle                                            */
/* ------------------------------------------------ */

.muzzle {
  position: absolute;
  left: 50%;
  top: 121px;

width: 112px;
  height: 82px;

transform: translateX(-50%);

border-radius: 50%;

background:
    radial-gradient(
      ellipse at 50% 42%,
      #f1c5a2,
      #d99c78 58%,
      #b46a4d 100%
    );

box-shadow:
    inset 0 -9px 13px rgba(92,40,25,.16),
    0 5px 8px rgba(50,20,14,.14);
}

/* Nose */

.nose {
  position: absolute;
  left: 50%;
  top: 17px;

width: 28px;
  height: 20px;

transform: translateX(-50%);

border-radius: 48% 48% 55% 55%;

background:
    radial-gradient(
      circle at 40% 30%,
      #553127,
      #21130f 72%
    );

box-shadow:
    inset 2px 2px 4px rgba(255,180,140,.08),
    0 2px 4px rgba(20,10,5,.3);
}

/* Mouth */

.mouth {
  position: absolute;
  left: 50%;
  top: 37px;

width: 40px;
  height: 22px;

transform: translateX(-50%);

border-bottom: 2px solid #49221a;
  border-radius: 0 0 50% 50%;
}

/* ------------------------------------------------ */
/* Whiskers                                         */
/* ------------------------------------------------ */

.whisker {
  position: absolute;

width: 110px;
  height: 1px;

background:
    linear-gradient(
      to right,
      transparent,
      rgba(55,32,22,.45)
    );

z-index: 8;
}

.left-w {
  left: 20px;
  top: 210px;
  transform: rotate(7deg);
}

.right-w {
  right: 20px;
  top: 210px;
  transform: scaleX(-1) rotate(7deg);
}

.left-w::before,
.left-w::after,
.right-w::before,
.right-w::after {
  content: "";
  position: absolute;
  left: 15px;
  width: 95px;
  height: 1px;

background:
    linear-gradient(
      to right,
      transparent,
      rgba(55,32,22,.3)
    );
}

.left-w::before,
.right-w::before {
  top: -8px;
  transform: rotate(-5deg);
}

.left-w::after,
.right-w::after {
  top: 8px;
  transform: rotate(5deg);
}

/* ------------------------------------------------ */
/* Caption                                          */
/* ------------------------------------------------ */

.caption {
  position: absolute;
  left: 50%;
  bottom: 38px;

transform: translateX(-50%);

text-align: center;

color: rgba(255,255,255,.78);

text-shadow:
    0 2px 8px rgba(0,0,0,.4);
}

.caption strong {
  display: block;

font-size: 15px;
  letter-spacing: 5px;
  font-weight: 600;
}

.caption span {
  display: block;

margin-top: 7px;

font-size: 10px;
  letter-spacing: 2px;

opacity: .55;
}

/* ------------------------------------------------ */
/* Small-screen adjustment                          */
/* ------------------------------------------------ */

@media (max-width: 650px) {

.panda {
    transform: translateX(-50%) scale(.72);
    transform-origin: bottom center;
  }

.caption {
    bottom: 20px;
  }
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground