• HTML
• CSS

HTML

<div class="cut" data-text="CRUNCH">CRUNCH</div>

CSS

/*Nunca subestimes a css XD*/
html,body{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(purple,teal);
}
.cut{
    font-size:5em;
    font-family:"arial black";
    position:relative;
    color:transparent;
}

.cut::before,
.cut::after{
    content:attr(data-text);
    position:absolute;
    top:0;
    left:0;
    color:gold;
    transition:0.2s;
}
.cut::before{
    clip-path:polygon(0 0,60% 0,30% 100%,0 100%);
}
.cut::after{
    clip-path:polygon(60% 0,100% 0,100% 100%,30% 100%);
}

.cut:hover::before{
    color:white;
    left:-0.15em;
    transform:rotate(-5deg);
    top:-0.05em;
    filter:blur(1px);
    
}
.cut:hover::after{
    color:white;
    left:0.15em;
    transform:rotate(5deg);
    top:0.05em;
    filter:blur(1px);
}