Tag: sliced-text

Demo:

To create the CSS Sliced Text Effect follow the steps below and watch the video tutorial:

1. Add HTML
2. Add CSS

Step1.

Add HTML

<div class="sliced-text">
  <div class="sliced"></div>
  <div class="shadow"></div>
  <div class="text">SLICED</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e63946;
}

Style the text:

.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;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Perspective Text Effect

How to add stroke/ outline to the text in CSS?

Pure CSS Rainbow Text Animation