<div class="sliced-text">
  <div class="sliced"></div>
  <div class="shadow"></div>
  <div class="text">SLICED</div>
</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e63946;
}

.sliced-text {
  position: relative;
  font-size:120px;
  font-weight: 900;
  font-family: arial;
  color: white;
}

.shadow {
 position: absolute;
 width: 600px;
 height: 100px;
 background-color: #e63946;
 transform: rotate(-7deg);
 top:0;
 left:-100px;
 overflow: hidden;
}

.sliced {
  position: relative;
  width:400px;
  height:100px;
  background-color: #e63946;
  filter: drop-shadow(0 80px 35px rgba(0,0,0,0.2));
  transform: rotate(-7deg);
}

.shadow:before {
  content:"SLICED";
  position: absolute;
  left:90px;
  top:30px;
  transform: rotate(7deg);
}

.text {
  position: absolute;
  z-index:-1;
  top:30px;
  left:3px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.