3D Text using CSS only
HTML
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>DUCKY</h1>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');
body {
display: flex;
justify-content: center;
font-family: 'Rubik', sans-serif;
}
.container {
margin-top: 20vh;
font-size: 10vh;
}
h1 {
letter-spacing: 15px;
text-shadow: 1px 1px 1px gray,
1px 1px 1px gray,
2px 2px 1px gray,
3px 3px 1px gray,
4px 4px 1px gray,
5px 5px 1px gray,
27px 17px 15px rgba(0, 0, 0, 0.5);
}
website : here
ConversionConversion EmoticonEmoticon