<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Text Shadow</title>
</head>
<body>
<style>
body{
background: #aaa;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h1{
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
color: white;
font-size: 11vw;
background: linear-gradient(-90deg, #dfd3c3 0%, rgba(190,190,190,1));
line-height: 1;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
h1:before{
content: attr(data-text);
-webkit-background-clip: none;
-webkit-text-fill-color: #000;
position: absolute;
z-index: -1;
filter: blur(14px);
transform: skew(67deg, 0) translate(-20%, 15%) scaleY(0.5);
-webkit-mask-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
padding: 0 22px;
}
</style>
<h1 data-text="Devcaffe">Devcaffe</h1>
</body>
</html>
