3D Text Shadow | Learning Axis

HTML

CSS

:root{
  --bg1:#0b1220; --bg2:#0e1a33;
  --glow:#74ffd9; --accent:#13d18f; --dark:#06101a;
}
html,body{
  height:100%;
  margin:0}
body{
  display:flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(1200px 800px at 70% 20%, var(--bg2), var(--bg1));
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.wrap{
  perspective: 1200px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
h1{
  --depth: 20;
  --size: clamp(42px, 10vw, 80px);
  --tiltX: 0deg;
  --tiltY: 0deg;
  font-size: var(--size);
  margin:0;
  letter-spacing:.02em;
  line-height: .95;
  text-transform: uppercase;
  position: relative;
  transform: rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
  background:
    linear-gradient(100deg, #fff 0%, #c8fff0 20%, #9df7dd 40%, #c8fff0 60%, #fff 80%) 0 0 / 200% 100% no-repeat,
    linear-gradient(180deg, #eafff8, #b3ffe8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 24px rgba(19,209,143,.25));
}
.underline{
  height:8px;
  width:min(60ch, 80vw);
  background: linear-gradient(90deg, transparent, rgba(116,255,217,.35), transparent);
  border-radius:99px;
  margin-top:34px;
  filter: blur(4px);
}