<div class="box">

  <div class="head">

    <div class="head2"></div>

    <div class="santa-hat"> </div>
    <div class ="santa"> </div>
    <div class ="santa-ball1"> </div>
    <div class ="santa-ball2"> </div>
    <div class ="santa-ball3"> </div>
    <div class ="santa-ball4"> </div>
    <div class ="santa-ball5"> </div>
    <div class="arm-left">

      <div class="blush"></div>
    </div>

    <div class="arm-right">

      <div class="blush2"></div>
    </div>

    <div class="eye-left">

      <div class="pupil">
      </div>
    </div>

    <div class="eye-right">

      <div class="pupil">
      </div>
    </div>

    <div class="nose">
    </div>

  </div>

  <div class="snowflakes" aria-hidden="true">
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
  </div>

</div>
.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
  background: linear-gradient(to bottom, #33ccff 0%, #ffffff 100%);
  border: ;
}

.body {
  background: ;
  height: 100%;
}

.head {
  background-color: black;
  width: 270px;
  height: 300px;
  top: 16.5%;
  left: 35%;
  display: inline-block;
  position: absolute;
  border-radius: 60% 55% 30% 30%;
}

.santa-hat {
background-color: #e60519;
  display: inline-block;
  position: absolute;
  z-index: 1;
  width: 250px;
  height: 120px;
  border-radius: 10% 60% 30% 30%;
  top: -18%;
  left: 5%;
}

.santa {
  display: inline-block;
  position: absolute;
  top: -19%;
  left: -10%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
  box-shadow: 5px 5px 40px #696969;
}

.santa-ball1{
  display: inline-block;
  position: absolute;
  top: 5%;
  left: -6%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
  box-shadow: 5px 5px 30px #696969;
}

.santa-ball2 {
  display: inline-block;
  position: absolute;
  top: 5%;
  left: 15%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
   box-shadow: 5px 5px 30px #696969;
}

.santa-ball3{
  display: inline-block;
  position: absolute;
  top: 5%;
  left: 36%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
   box-shadow: 5px 5px 30px #696969;
}

.santa-ball4{
  display: inline-block;
  position: absolute;
  top: 5%;
  left: 58%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
   box-shadow: 5px 5px 30px #696969;
}

.santa-ball5{
  display: inline-block;
  position: absolute;
  top: 5%;
  left: 80%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
   box-shadow: 5px 5px 30px #696969;
}

.head2 {
  background-color: white;
  width: 230px;
  height: 260px;
  top: 9%;
  left: 8%;
  display: inline-block;
  position: absolute;
  border-radius: 55% 55% 30% 30%;
}

.arm-left {
  width: 50px;
  height: 100px;
  background-color: #000;
  position: absolute;
  top: 45%;
  right: 95%;
  animation-name: arms;
  animation-duration: 4s;
  border-radius: 1990% 100% 1700% 100%;
  -webkit-animation: action 1s infinite alternate;
  animation: action 1s infinite alternate;
}

.arm-right {
  width: 50px;
  height: 100px;
  background-color: #000;
  position: absolute;
  top: 43%;
  left: 93%;
  border-radius: 100% 1990% 100% 1700%;
  animation-name: arms;
  animation-duration: 4s;
  -webkit-animation: action 1s infinite alternate;
  animation: action 1s infinite alternate;
}

.blush {
  width: 30px;
  height: 20px;
  background-color: #ffc0cb;
  border-radius: 50%;
  position: absolute;
  top: -3%;
  left: 188%;
  z-index: 3;
}

.blush2 {
  width: 30px;
  height: 20px;
  background-color: #ffc0cb;
  border-radius: 50%;
  position: absolute;
  top: 1%;
  left: -135%;
  z-index: 3;
}

.eye-left {
  position: absolute;
  background: black;
  width: 10%;
  height: 10%;
  top: 35%;
  left: 31%;
  border-radius: 50%;
  z-index: 3;
}

.eye-right {
  position: absolute;
  background: black;
  width: 10%;
  height: 10%;
  top: 35%;
  right: 31%;
  border-radius: 50%;
  z-index: 3;
}

.pupil {
  position: absolute;
  width: 38%;
  height: 35%;
  top: 35%;
  left: 20%;
  border-radius: 50%;
  background: white;
}

.nose {
  width: 55px;
  height: 30px;
  background-color: #feb236;
  border-radius: 90% 90% 80% 90%;
  position: absolute;
  top: 45%;
  left: 40%;
  z-index: 1;
}

@-webkit-keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@-webkit-keyframes snowflakes-shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
  }
}
@keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@keyframes snowflakes-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(80px);
  }
}
.snowflake {
  position: fixed;
  top: -10%;
  z-index: 9999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-animation-name: snowflakes-fall, snowflakes-shake;
  -webkit-animation-duration: 10s, 3s;
  -webkit-animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
  -webkit-animation-play-state: running, running;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}
.snowflake:nth-of-type(0) {
  left: 1%;
  -webkit-animation-delay: 0s, 0s;
  animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
  left: 10%;
  -webkit-animation-delay: 1s, 1s;
  animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
  left: 20%;
  -webkit-animation-delay: 6s, 0.5s;
  animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
  left: 30%;
  -webkit-animation-delay: 4s, 2s;
  animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
  left: 40%;
  -webkit-animation-delay: 2s, 2s;
  animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
  left: 50%;
  -webkit-animation-delay: 8s, 3s;
  animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
  left: 60%;
  -webkit-animation-delay: 6s, 2s;
  animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
  left: 70%;
  -webkit-animation-delay: 2.5s, 1s;
  animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
  left: 80%;
  -webkit-animation-delay: 1s, 0s;
  animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
  left: 90%;
  -webkit-animation-delay: 3s, 1.5s;
  animation-delay: 3s, 1.5s;
}
.snowflake:nth-of-type(10) {
  left: 25%;
  -webkit-animation-delay: 2s, 0s;
  animation-delay: 2s, 0s;
}
.snowflake:nth-of-type(11) {
  left: 65%;
  -webkit-animation-delay: 4s, 2.5s;
  animation-delay: 4s, 2.5s;
}
<!-- Snowflakes were created by Pajasevi thank you :D  https://gist.github.com/pajasevi/0c50b0b95795debd6c1e#file-snowflake-snippet --!>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.