<div class="box">
<h1>3D Box Shadow</h1>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
color: #fff;
display: grid;
place-content: center;
gap: 1.25rem;
}
h1 {
-webkit-background-clip: text;
background-image: linear-gradient(115deg, #fc00ff, #00dbde);
font-weight: 700;
margin: 0;
font-size: clamp(2rem, 2.5rem + 4vw, 4rem);
letter-spacing: 0.02em;
}
.box {
color: transparent;
text-transform: uppercase;
background-color: #212121;
min-height: 50vh;
aspect-ratio: 16 / 9;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
padding: 5vmin;
border: 1px solid #111;
box-shadow: 1px 1px #111, 2px 2px #111, 3px 3px #111, 4px 4px #111,
5px 5px #111, 6px 6px #111, 7px 7px #111, 8px 8px #111, 9px 9px #111,
10px 10px #111, 12px 12px #111, 13px 13px #111, 14px 14px #111,
15px 15px #111, 16px 16px #111, 17px 17px #111, 18px 18px #111,
19px 19px #111, 20px 20px #111;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.