Colossal titan using CSS is a cool and challenging thing to do. You can say this has no use, But it’s a great mini project to practice CSS.

Also, Read- How to link CSS to HTML easy

Who is Colossal Titan?

Colossal Titan is an Anime character from the series Attack on Titan. It is a great series to watch for adults.

How to create Colossal Titan using CSS?

We will create this beautiful art with the help of HTML and CSS.

Step 1:

First, We will create an HTML file with the below code.

<div class="head">
  <div class="back"></div>
  <div class="back-t"></div>
  <div class="ear-r"></div>
  <div class="ear-l"></div>
  <div class="cheek-r"></div>
  <div class="cheek-l"></div>
  <div class="lig-rr"></div>
  <div class="lig-ll"></div>
  <div class="top">
    <div class="eye-r"><div></div></div>
    <div class="eye-l"><div></div></div>
  </div>
  <div class="b-eye-r"></div>
  <div class="b-eye-l"></div>
  <div class="u-nose"></div>
  <div class="nose">
    <div class="n1"></div>
    <div class="n2"></div>
    <div class="n3"></div>
  </div>
  <div class="lig-r"></div>
  <div class="lig-r1"></div>
  <div class="lig-r2"></div>
  <div class="lig-l"></div>
  <div class="lig-l1"></div>
  <div class="lig-l2"></div>
  <div class="bottom"></div>
  <div class="mouth"></div>
  <div class="t-mouth"></div>
  <div class="t-mouth-l"></div>
  <div class="t-mouth-r"></div>
  <div class="t-mouth-t"></div>
  <div class="edge"></div>
  <div class="edge-e"></div>
</div>

Step 2:

Next, We will create style.css file and copy the below code

body {
  margin: 0;
  height: 100vh;
  display: grid;
  background-color: #fffbf2; /*#fff7e4;*/
  overflow: hidden;
}

.head {
  --sk: #f5dac7; /*#f7ceb2 #e6c6b7*/
  --sb: #ca7a64; /*#cf5341*/
  height: min(430px, 100vmin);
  aspect-ratio: 295/430;
  position: relative;
  filter: drop-shadow(0 0px 1px black);
  margin: auto auto 0;
}
.top {
  position: absolute;
  overflow: hidden;
  width: 78%;
  height: 42%;
  left: 50%;
  top: 3%;
  transform: translate(-50%);
  --c1: #5f5149;
  background: linear-gradient(var(--c1) 0 0) 50% 70%/1px 15%, linear-gradient(
        to bottom left,
        #0000 40%,
        var(--c1),
        #0000 50%
      ) 47% 74%/4% 16%,
    linear-gradient(to bottom right, #0000 40%, var(--c1), #0000 50%) 54% 74%/4%
      20%, linear-gradient(to bottom right, #0000 40%, var(--c1), #0000 50%) 59%
      74%/8% 11%,
    linear-gradient(to bottom left, #0000 40%, var(--c1), #0000 50%) 41% 74%/8% 11%,
    linear-gradient(to bottom left, #0000 40%, var(--c1), #0000 50%) 43% 74%/5% 11%,
    linear-gradient(to bottom right, #0000 40%, var(--c1), #0000 50%) 57% 74%/5%
      11%, linear-gradient(to bottom left, #0000 40%, var(--c1), #0000 50%) 57% -15%/3%
      22%,
    linear-gradient(to bottom left, #0000 40%, var(--c1), #0000 50%) 71% -5%/4% 19%,
    linear-gradient(to bottom right, #0000 45%, var(--c1), #0000 55%) 82% 65%/3%
      7%,
    linear-gradient(to bottom right, #0000 45%, var(--c1), #0000 54%) 75% 61%/4%
      8%, linear-gradient(to bottom left, #0000 45%, var(--c1), #0000 54%) 21% 45%/3%
      11%,
    linear-gradient(to bottom left, #0000 48%, var(--c1), #0000 52%) 26% 69%/8% 22%,
    linear-gradient(to bottom right, #0000 41%, var(--c1), #0000 58%) 57% 23%/3%
      19%,
    linear-gradient(to bottom right, #0000 41%, var(--c1), #0000 58%) 86.5% 23%/2%
      15%, linear-gradient(to bottom right, #0000 46%, var(--c1), #0000 53%) 84%
      37%/6% 10%,
    linear-gradient(to bottom right, #0000 42%, var(--c1), #0000 58%) 68% 38%/4%
      4%, linear-gradient(to bottom right, #0000 45%, var(--c1), #0000 55%) 71% 27%/4%
      22%,
    linear-gradient(to bottom right, #0000 40%, var(--c1), #0000 60%) 34% 40%/2%
      12%, linear-gradient(to bottom left, #0000 40%, var(--c1), #0000 60%) 35% 27%/2%
      29%,
    linear-gradient(to bottom left, #0000 40%, var(--c1), #0000 60%) 18% 18%/2% 16%,
    linear-gradient(to bottom left, #0000 45%, var(--c1), #0000 55%) 43% 2%/3% 24%,
    linear-gradient(var(--sk) 0 0) top/100% 77%, linear-gradient(var(--sk) 0 0) bottom/88%
      28%;
  background-repeat: no-repeat;
  border-radius: 50% 50% 0 0/65% 63% 0 0;
  border-top: 1px solid;
  border-bottom: 0;
}
.top:before,
.top:after {
  content: "";
  position: absolute;
  width: 13%;
  height: 43%;
  background: radial-gradient(120% 89% at 41% 0, #0000 93%, #4b2a1e), var(--sb);
  right: -2%;
  top: 42%;
  border-radius: 53% 47% 46% 54% / 58% 30% 70% 42%;
  border: 1px solid #5f5149;
}
.top:before {
  left: -2%;
  right: auto;
  transform: scaleX(-1);
}
.top [class*="eye"] {
  position: absolute;
  width: 34%;
  height: 24%;
  background: radial-gradient(
        farthest-side,
        #000 32%,
        #88878d 50% 87%,
        #000,
        #0000
      ) 34.5% 44%/15% 24%, radial-gradient(farthest-side, #fff 98%, #0000) 32% 47%/29%
      25%, radial-gradient(80% 46% at left, #0f0f0f 98%, #0000) #49281c;
  right: 8%;
  background-repeat: no-repeat;
  top: 75%;
  border-radius: 0 50% 50% 0;
  border: 1px solid #0f0f0f;
}
.eye-l {
  left: 8%;
  right: auto;
  transform: scaleX(-1);
}
.top [class*="eye"] div:before,
.top [class*="eye"] div:after {
  content: "";
  position: absolute;
  width: 27%;
  top: 21%;
  right: 50%;
  aspect-ratio: 1;
  border-radius: 100% 0 0;
  border: 2px solid #994d40;
  box-shadow: 1px 1px 2px inset #0f0f0f;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
.top [class*="eye"] div:after {
  transform: rotate(-135deg);
  top: 24%;
  border-width: 1.5px;
}
.top [class*="eye"]:before {
  content: "";
  position: absolute;
  width: 84%;
  top: -9%;
  left: -13%;
  height: 33%;
  background: var(--sk);
  border-radius: 6px 0 100% 8px;
  border: 2px solid #0f0f0f;
  border-top: 0;
  border-right: 0;
  transform-origin: right bottom;
  transform: rotate(-2deg);
}
.top [class*="eye"]:after {
  content: "";
  position: absolute;
  right: 100%;
  width: 16%;
  top: 25%;
  height: 75%;
  background: #0f0f0f;
  border-radius: 100% 0 0 0;
}
.b-eye-r,
.b-eye-l {
  position: absolute;
  width: 28.5%;
  height: 18%;
  background: radial-gradient(107% 82% at 63% 0, #0000 84%, #4b2a1e70),
    linear-gradient(var(--sb) 0 0) bottom/100% 81%, radial-gradient(
        84% 95% at 24% 100%,
        var(--sb) 98%,
        #0000
      ) 0 0/50% 20%,
    radial-gradient(71% 103% at 30% -33%, #0000 98%, var(--sb)) 100% 0/50% 20%;
  background-repeat: no-repeat;
  right: 19%;
  top: 42%;
  border-radius: 39% 0 50% 50%/15% 0 50% 50%;
  filter: drop-shadow(0 -1px 0 #0f0f0f);
}
.b-eye-l {
  left: 19%;
  right: auto;
  transform: scaleX(-1);
}
.nose {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 1px #0f0f0f) drop-shadow(0 0 1px #0f0f0f);
  clip-path: inset(44.5% 0 0 0);
}
.nose:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  background: radial-gradient(35% 92% at bottom left, #0000 89%, var(--sk)) left/51%
      100%, radial-gradient(35% 92% at bottom right, #0000 89%, var(--sk)) right/51%
      100%;
  background-repeat: no-repeat;
  width: 7%;
  top: 44.5%;
  height: 4%;
}
.n1 {
  position: absolute;
  width: 13%;
  aspect-ratio: 1/1;
  top: 51%;
  background: var(--sk);
  left: 50%;
  transform: translate(-50%) rotate(45deg) rotate3d(1, -1, 0, 41deg);
  border-radius: 0 5px 13px 5px;
}
.n2 {
  position: absolute;
  width: 9%;
  aspect-ratio: 1/1;
  top: 49%;
  background: var(--sk);
  left: 50%;
  transform: translate(-50%) rotate(45deg) rotate3d(1, -1, 0, 9deg);
  border-radius: 0 5px 13px 5px;
}
.n3 {
  position: absolute;
  width: 9%;
  aspect-ratio: 1/1;
  top: 46%;
  background: var(--sk);
  left: 50%;
  transform: translate(-50%) rotate(45deg) rotate3d(1, 1, 0, 44deg);
  border-radius: 0 5px 13px 5px;
}
.u-nose {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%);
  width: 37%;
  height: 17%;
  background: radial-gradient(50% 107% at top, #0005 72%, #0000) top/45% 30%, linear-gradient(
        to bottom right,
        #0000 40%,
        #5f5149,
        #0000 50%
      ) 40% 36%/8% 57%,
    linear-gradient(to bottom left, #0000 40%, #5f5149, #0000 50%) 60% 36%/8% 57%,
    radial-gradient(116% 32% at 150% -6%, #0000 93%, #0f0f0f 95% 98%, var(--sk))
      right/50.5% 100%,
    radial-gradient(116% 32% at -50% -6%, #0000 93%, #0f0f0f 95% 98%, var(--sk))
      left/50.4% 100%;
  background-repeat: no-repeat;
}
.lig-r,
.lig-l {
  position: absolute;
  height: 28%;
  width: 7.5%;
  background: radial-gradient(
    67% 40% at -24% 44%,
    #0000 90%,
    #0f0f0f 92% 96%,
    var(--sk)
  );
  border-radius: 0 100% 100% 0/0 50% 50% 0;
  right: 10%;
  top: 41%;
  transform-origin: top;
  transform: rotate(27deg);
  border-right: 2px solid #0f0f0f;
  clip-path: polygon(0 0, 100% 21%, 100% 84%, -20% 100%);
}
.lig-l {
  right: auto;
  left: 10%;
  transform: scaleX(-1) rotate(27deg);
}
.lig-rr,
.lig-ll {
  position: absolute;
  height: 32%;
  width: 4%;
  right: 15.3%;
  top: 42%;
  border-radius: 100% 100% 0 0;
  border: 2px solid #0f0f0f;
  transform: rotate(9deg);
  box-shadow: 0 0 0 33px var(--sk);
  clip-path: polygon(-90% -30%, 87% -21%, 136% 90%, 33% 42%, 45% 18%, 0% 18%);
}
.lig-ll {
  left: 15.3%;
  right: auto;
  transform: scaleX(-1) rotate(9deg);
}
.lig-r1,
.lig-l1 {
  position: absolute;
  height: 15%;
  width: 18%;
  right: 12%;
  top: 61.2%;
  border-radius: 15px 0 0 20px/32px 0 0 20px;
  transform: rotate(-15deg);
  border: 2px solid #0f0f0f;
  box-shadow: 0 0 0 300px var(--sk);
  clip-path: polygon(-14% 0, 24% -4%, 38% 34%, 41% 120%, -38% 100%);
}
.lig-l1 {
  left: 12%;
  right: auto;
  transform: scaleX(-1) rotate(-15deg);
}
.lig-r2,
.lig-l2 {
  position: absolute;
  height: 12.5%;
  width: 4%;
  right: 16.5%;
  top: 64%;
  border-radius: 0 0 100% 0/0 0 32% 0;
  border: 2px solid #0f0f0f;
  border-top: 0;
  border-left: 0;
  box-shadow: 0 0 0 300px var(--sk);
  clip-path: polygon(13% 0%, 125% 0, 125% 115%, 13% 103%);
}
.lig-l2 {
  left: 16.5%;
  right: auto;
  transform: scaleX(-1);
}
.bottom {
  position: absolute;
  width: 50%;
  aspect-ratio: 1/1;
  background: radial-gradient(
      circle at 67% 68%,
      var(--sb) 41%,
      #0f0f0f,
      #0000 43%
    ), var(--sk);
  top: 61%;
  left: 50%;
  transform: translate(-50%) rotateX(28deg) rotate(45deg);
  border-radius: 0 5px 50% 5px;
  border-right: 2px solid #0f0f0f;
  border-bottom: 2px solid #0f0f0f;
  clip-path: polygon(95% 0, 100% 0, 100% 100%, 0 100%, 0 95%);
  overflow: hidden;
}
.bottom:before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(72% 78% at top, #0000 92%, #0006);
  transform: rotate(-45deg);
}
.cheek-r,
.cheek-l {
  position: absolute;
  width: 20%;
  height: 34%;
  --c: #e9e9e9 79%, #0f0f0f 82% 98%, #0000;
  background: radial-gradient(65% 89% at 51% 100%, #0000 50%, #4b2a1e),
    radial-gradient(57% 52% at 50% 50%, var(--c)) 19% 79%/8% 12%, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 28% 78%/8% 12%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 37% 77%/8% 12%, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 46% 76%/8% 12%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 54% 75%/6% 12%, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 62% 74%/6% 12%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 69% 73%/6% 12%, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 76% 72%/6% 12%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 81% 71%/6% 12%, var(--sb);
  background-repeat: no-repeat;
  right: 13%;
  top: 43%;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}
.cheek-l {
  left: 13%;
  right: auto;
  transform: scaleX(-1);
}
.cheek-r:before,
.cheek-l:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 27.5%;
  background: #0f0f0f;
  transform: rotate(-17deg);
}
.ear-r,
.ear-l {
  position: absolute;
  height: 29%;
  width: 10%;
  background: linear-gradient(to bottom right, #0f0f0f 50%, #0000 54%) 31% 81%/28%
      22%, radial-gradient(farthest-side, #0f0f0f 91%, #0000) 0 59%/55% 43%,
    radial-gradient(farthest-side, #a39185 92%, #0000) 35% 38%/61% 47%, radial-gradient(
        farthest-side,
        #0f0f0f 97%,
        #0000
      ) 33% 20%/69% 53%,
    radial-gradient(farthest-side, var(--sk) 95%, #0000) bottom/32% 23%, linear-gradient(
      102deg,
      var(--sk) 71%,
      #0000 72%
    ), linear-gradient(var(--sk) 0 0) top / 100% 42%;
  background-repeat: no-repeat;
  right: 2.5%;
  top: 36%;
  border-radius: 100% 100% 0 0;
  transform-origin: top;
  transform: rotateY(32deg) rotate(10deg);
  filter: drop-shadow(0 0 0px #000) drop-shadow(0 0 0px #000);
}
.ear-l {
  right: auto;
  left: 2%;
  transform: scaleX(-1) rotateY(32deg) rotate(10deg);
}
.mouth {
  position: absolute;
  width: 40%;
  height: 10%;
  --c: #e9e9e9 79%, #0f0f0f 82% 98%, #0000;
  background: linear-gradient(#0f0f0f 0 0) 50% 50.5%/100% 1.5px, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 14% 47%/6% 38%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 20% 47%/6% 38%, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 27% 50%/6% 38%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 33% 50%/6% 38%, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 39% 50%/6% 38%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 46.5% 50%/8% 38%, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 55% 50%/8% 38%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 62% 50%/6% 38%, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 68% 50%/6% 38%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 74% 50%/6% 38%, radial-gradient(
        57% 52% at 50% 50%,
        var(--c)
      ) 81% 50%/6% 38%,
    radial-gradient(57% 52% at 50% 50%, var(--c)) 86% 50%/6% 38%, var(--sb);
  background-repeat: no-repeat;
  left: 50%;
  top: 64%;
  transform: translate(-50%);
  clip-path: polygon(21% 0, 79% 0, 100% 100%, 0 100%);
}
.t-mouth {
  position: absolute;
  width: 28%;
  height: 4%;
  background: conic-gradient(from -80deg at bottom, #836b65 0 160deg, #0000 0) 0
      40%/100% 80%, radial-gradient(43% 39% at bottom, #0000 98%, #836b65);
  background-repeat: no-repeat;
  left: 50%;
  transform: translate(-50%);
  top: 62%;
  border-radius: 1000px 1000px 0 0/500px 500px 0 0;
  clip-path: polygon(
    -30% -40%,
    31% -19%,
    50% 17%,
    68% -19%,
    130% -40%,
    130% 500%,
    -30% 500%
  );
  filter: drop-shadow(0 0 1px #0f0f0f) drop-shadow(0 0 0 #0f0f0f);
}
.t-mouth:before {
  content: "";
  position: absolute;
  right: 3%;
  width: 72%;
  height: 40%;
  bottom: 59%;
  transform-origin: right bottom;
  transform: rotate(-113deg);
  background: #836b65;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  border-radius: 0 50% 50% 0;
}
.t-mouth:after {
  content: "";
  position: absolute;
  left: 3%;
  width: 72%;
  height: 40%;
  bottom: 59%;
  transform-origin: left bottom;
  transform: rotate(113deg);
  background: #836b65;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  border-radius: 50% 0 0 50%;
}
.t-mouth-l,
.t-mouth-r {
  position: absolute;
  right: 30%;
  width: 20%;
  height: 8%;
  background: radial-gradient(90% 60% at 0 100%, #0000 98%, var(--sk));
  top: 72%;
  border-top: 2px solid #0f0f0f;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 55% 0 0;
  transform: rotate(-5deg);
}
.t-mouth-r {
  left: 30%;
  right: auto;
  transform: scaleX(-1) rotate(-5deg);
}
.t-mouth-t {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 74.7%;
  width: 24%;
  height: 4.5%;
  background: radial-gradient(97% 95% at top, #0000 72%, #0f0f0f) var(--sk);
  border-radius: 0 0 60% 60%/0 0 50% 50%;
  border-bottom: 1px solid #0f0f0f;
}
.t-mouth-t:before,
.t-mouth-t:after {
  content: "";
  position: absolute;
  width: 17%;
  height: 54%;
  border-radius: 50%;
  top: 55%;
  left: 96%;
  border-top: 1px solid #0f0f0f;
  box-shadow: 0 -5px 0 var(--sk);
}
.t-mouth-t:after {
  left: auto;
  right: 98%;
}
.head .edge:before,
.head .edge:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 15%;
  background: #0f0f0f;
  bottom: 22%;
  left: 15%;
  z-index: 1;
}
.head .edge:after {
  right: 15%;
  left: auto;
}
.head .edge-e:before,
.head .edge-e:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 21%;
  background: #0f0f0f;
  bottom: 37%;
  left: 15%;
  z-index: 1;
  transform: rotate(-7deg);
  transform-origin: bottom;
}
.head .edge-e:after {
  left: auto;
  right: 15%;
  transform: rotate(7deg);
}
.back {
  width: 130%;
  left: 50%;
  position: absolute;
  aspect-ratio: 1;
  background: var(--sb);
  transform: translate(-50%) rotate(45deg) rotate3D(1, -1, 0, 42deg);
  top: 66%;
  border: 2px solid #0f0f0f;
  border-radius: 0 40% 0 15%/0 15% 0 40%;
}
.back-t {
  position: absolute;
  width: 67%;
  height: 80%;
  left: 50%;
  transform: translate(-50%);
  background: radial-gradient(86% 100% at 51% 0%, #4b2a1e 70%, #0000) var(--sb);
  bottom: -23%;
  border-radius: 0 0 80% 80%/0 0 100% 100%;
  border: 16px solid var(--sk);
  box-shadow: 3px 0 0 #0f0f0f inset, -3px 0 0 #0f0f0f inset;
  filter: drop-shadow(0px 0px 1px #0f0f0f) drop-shadow(0px 0px 1px #0f0f0f);
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

With that said I hope you enjoyed this post. If you find this post helpful then please share and comment.