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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.