<h1 class="shadow">2021</h1>

<div class="split">
  <h1 class="split-1">2021</h1>
  <h1 class="split-2">2021</h1>
</div>

<h1 class="typo">2021</h1>
  
@import url('https://fonts.googleapis.com/css?family=Montserrat:900i&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  padding: 0;
}

h1 {
  line-height: 240px;
}

.shadow {
		  font-size: 120px;
	    text-align: center;
	    color: #fcedd8;
	    background: #d52e3f;
	   	font-family: monospace;
      margin: 0;
	    font-weight: 700;
      text-shadow: 5px 5px 0px #eb452b, 
                  10px 10px 0px #efa032, 
                  15px 15px 0px #46b59b, 
                  20px 20px 0px #017e7f, 
                  25px 25px 0px #052939, 
                  30px 30px 0px #c11a2b, 
                  35px 35px 0px #c11a2b, 
                  40px 40px 0px #c11a2b, 
                  45px 45px 0px #c11a2b;
}

.split {
  position: relative;
}

.split h1 {
  font-size: 120px;
	font-weight: 900;
  font-family: monospace;
	background-color: #e17943;
	color: #fff;
	display: block;
  text-align: center;
}

.split .split-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
	background-color: #fff;
	color: #e17943;
	clip-path: inset(0 0 50% 0);
}

.typo {
  text-align: center;
  background-color: #e0e1e2;
  font-size: 120px;
	letter-spacing: 8px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: white;
  text-shadow: 
						8px 8px #ff1f8f,
						20px 20px #000000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.