3D Extruded Text Effect: CSS Text Animation

3D Extruded Text Effect

Heavy block letters with visible depth tilt slowly left and right in 3D, and the extruded side swings to follow the tilt. The depth is ten stacked text-shadow layers in darker accent shades.

Also known as: 3d text effect css, 3d text animation css, extruded text shadow.

DEPTH

Color Font size 40px Dark background

HTML

<div class="txt-3d-extruded-text">DEPTH</div>

CSS

.txt-3d-extruded-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.8);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  letter-spacing: 0.02em;
  animation: txt-3d-extruded-text-tilt 5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;}
/* The depth sits on the side turned toward you, so it flips with the tilt. */
@keyframes txt-3d-extruded-text-tilt {
  from {
    transform: perspective(12em) rotateX(10deg) rotateY(-22deg);
    text-shadow:
      0.014em 0.006em 0 color-mix(in srgb, var(--c) 80%, #000),
      0.028em 0.012em 0 color-mix(in srgb, var(--c) 77%, #000),
      0.042em 0.018em 0 color-mix(in srgb, var(--c) 74%, #000),
      0.056em 0.024em 0 color-mix(in srgb, var(--c) 71%, #000),
      0.07em 0.03em 0 color-mix(in srgb, var(--c) 68%, #000),
      0.084em 0.036em 0 color-mix(in srgb, var(--c) 65%, #000),
      0.098em 0.042em 0 color-mix(in srgb, var(--c) 62%, #000),
      0.112em 0.048em 0 color-mix(in srgb, var(--c) 59%, #000),
      0.126em 0.054em 0 color-mix(in srgb, var(--c) 56%, #000),
      0.14em 0.06em 0 color-mix(in srgb, var(--c) 53%, #000),
      0.252em 0.188em 0.14em color-mix(in srgb, var(--c) 28%, transparent);
  }
  to {
    transform: perspective(12em) rotateX(10deg) rotateY(22deg);
    text-shadow:
      -0.014em 0.006em 0 color-mix(in srgb, var(--c) 80%, #000),
      -0.028em 0.012em 0 color-mix(in srgb, var(--c) 77%, #000),
      -0.042em 0.018em 0 color-mix(in srgb, var(--c) 74%, #000),
      -0.056em 0.024em 0 color-mix(in srgb, var(--c) 71%, #000),
      -0.07em 0.03em 0 color-mix(in srgb, var(--c) 68%, #000),
      -0.084em 0.036em 0 color-mix(in srgb, var(--c) 65%, #000),
      -0.098em 0.042em 0 color-mix(in srgb, var(--c) 62%, #000),
      -0.112em 0.048em 0 color-mix(in srgb, var(--c) 59%, #000),
      -0.126em 0.054em 0 color-mix(in srgb, var(--c) 56%, #000),
      -0.14em 0.06em 0 color-mix(in srgb, var(--c) 53%, #000),
      -0.252em 0.188em 0.14em color-mix(in srgb, var(--c) 28%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .txt-3d-extruded-text, .txt-3d-extruded-text *, .txt-3d-extruded-text::before, .txt-3d-extruded-text::after, .txt-3d-extruded-text *::before, .txt-3d-extruded-text *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

3D Extruded Text Effect

HTML

CSS

Customizing this snippet

Similar text animations