spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/text-fx/text-shadow-3d-tilt.html7  Desc   : Extruded pseudo-3D text that tilts in perspective on hover8  ============================================================9-->10<!--svgarden11title: 3D extruded tilt12slug: text-shadow-3d-tilt13category: text-fx14tags: [text, 3d, perspective, hover]15difficulty: intermediate16techniques: [perspective, rotateX-rotateY, --sg-i-index-stagger, grid-area-stacking, brightness-derived-shading]17how_it_works: >18  The extrusion is six copies of the same word stacked in one grid cell — every19  layer reads its depth index from a --sg-i variable and computes its own offset20  with translate: calc(var(--sg-i) * var(--sg-depth)), so one rule places the21  whole stack and the depth becomes a single tunable knob. Shading needs no22  second color: filter: brightness() derived from the same index darkens deeper23  layers progressively, which is what sells the solid-block illusion. Hovering24  (or keyboard-focusing) tips the stack with rotateX/rotateY inside a25  perspective-carrying wrapper, and because the offsets survive the rotation the26  extrusion appears genuinely volumetric.27customizable:28  - { var: "--sg-color", label: "Color",     type: color, default: "#7F77DD" }29  - { var: "--sg-size",  label: "Font size", type: range, min: 28, max: 90, default: 54, unit: px }30  - { var: "--sg-depth", label: "Depth",     type: range, min: 0.5, max: 3, step: 0.1, default: 1.4, unit: px }31created: 2026-08-1032-->33<div class="sg-text-shadow-3d-tilt" tabindex="0" aria-label="DEPTH" style="--sg-color:#7F77DD; --sg-size:54px; --sg-depth:1.4px;">34  <span class="sg-text-shadow-3d-tilt-stack">35    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:5" aria-hidden="true">DEPTH</span>36    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:4" aria-hidden="true">DEPTH</span>37    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:3" aria-hidden="true">DEPTH</span>38    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:2" aria-hidden="true">DEPTH</span>39    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:1" aria-hidden="true">DEPTH</span>40    <span class="sg-text-shadow-3d-tilt-layer" style="--sg-i:0" aria-hidden="true">DEPTH</span>41  </span>42</div>43<style>44  .sg-text-shadow-3d-tilt {45    display: inline-block;46    perspective: 550px;47    cursor: default;48  }49  .sg-text-shadow-3d-tilt-stack {50    display: grid;51    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;52    font-size: var(--sg-size);53    font-weight: 800;54    letter-spacing: 0.03em;55    line-height: 1.1;56    transition: transform 0.45s ease;57  }58  .sg-text-shadow-3d-tilt-layer {59    grid-area: 1 / 1;60    color: var(--sg-color);61    translate: calc(var(--sg-i) * var(--sg-depth)) calc(var(--sg-i) * var(--sg-depth));62    filter: brightness(calc(1 - var(--sg-i) * 0.13));63  }64  .sg-text-shadow-3d-tilt:hover .sg-text-shadow-3d-tilt-stack,65  .sg-text-shadow-3d-tilt:focus-visible .sg-text-shadow-3d-tilt-stack {66    transform: rotateX(18deg) rotateY(-14deg);67  }68</style>69