/* 3D text effects. Layered and extruded headlines are one element with stacked text-shadows. The isometric word is real 3D:
aria-hidden copies pushed back with translateZ under the real text. The fold is the real word clipped to its top half,
with an aria-hidden copy of the bottom half turned on the X axis. Screen readers get the word once in every case. */
.tx{display:grid;place-items:center;min-height:250px;padding:30px 20px;border-radius:22px;overflow:hidden;text-align:center}
.tx :where(p,h2){margin:0}
/* A. layered depth: hard-edged shadows in bands of colour */
.tx-retro{background:#fff7ed}
.tx-layer{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:800;font-size:clamp(2.8rem,9vw,4.4rem);line-height:1;letter-spacing:-.01em;color:#be123c;
text-shadow:1px 1px 0 #f59e0b,2px 2px 0 #f59e0b,3px 3px 0 #f59e0b,4px 4px 0 #f59e0b,5px 5px 0 #0f766e,6px 6px 0 #0f766e,7px 7px 0 #0f766e,8px 8px 0 #0f766e,9px 9px 0 #134e4a,10px 10px 0 #134e4a}
.tx-sub{margin-top:18px;font-size:.78rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:#9a3412}
/* B. extruded block letters: a ramp of darker shadows, then a soft cast shadow */
.tx-block-bg{background:radial-gradient(120% 90% at 50% 0%,#3730a3,#1e1b4b)}
.tx-block{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(3.2rem,12vw,5.4rem);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:#fde047;
text-shadow:0 1px 0 #facc15,0 2px 0 #eab308,0 3px 0 #e0a806,0 4px 0 #d69e05,0 5px 0 #ca8a04,0 6px 0 #b77b04,0 7px 0 #a16207,0 8px 0 #8a5306,0 9px 0 #713f12,
0 10px 2px rgba(0,0,0,.25),0 16px 14px rgba(0,0,0,.45),0 26px 30px rgba(0,0,0,.35)}
.tx-block-bg .tx-sub{color:#c7d2fe}
/* C. isometric word: real text on top, copies stepping down in Z underneath */
.tx-iso-bg{background:linear-gradient(160deg,#0c4a6e,#082f49)}
.tx-iso{display:grid;transform:rotateX(55deg) rotateZ(-40deg);transform-style:preserve-3d}
.tx-iso > span{grid-area:1/1;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(3rem,11vw,4.4rem);line-height:1;letter-spacing:.04em}
.tx-iso-top{color:#a5f3fc;transform:translateZ(0)}
.tx-iso-l{transform:translateZ(calc(var(--i) * -2px))}
.tx-iso-l:nth-child(2){color:#0b3a4f}.tx-iso-l:nth-child(3){color:#0c4058}.tx-iso-l:nth-child(4){color:#0d4661}.tx-iso-l:nth-child(5){color:#0e4c6a}.tx-iso-l:nth-child(6){color:#0f5373}.tx-iso-l:nth-child(7){color:#105a7c}.tx-iso-l:nth-child(8){color:#116185}.tx-iso-l:nth-child(9){color:#12688e}.tx-iso-l:nth-child(10){color:#126f97}.tx-iso-l:nth-child(11){color:#1376a0}
.tx-iso-shadow{color:rgba(2,6,23,.55);transform:translateZ(-26px);filter:blur(4px)}
/* D. folded word: top half flat, bottom half turned back on the X axis */
.tx-fold-bg{background:#f5f3ff}
.tx-fold{display:inline-grid;perspective:420px;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(3rem,11vw,4.8rem);line-height:1;letter-spacing:.02em;text-transform:uppercase}
.tx-fold > span{grid-area:1/1;padding:0 .04em}
.tx-fold-a{color:#6d28d9;clip-path:inset(0 0 50% 0)}
.tx-fold-b{color:#4c1d95;clip-path:inset(50% 0 0 0);transform:rotateX(52deg);transform-origin:50% 50%;
background:linear-gradient(180deg,rgba(76,29,149,0) 50%,rgba(76,29,149,.08) 100%)}
.tx-fold-bg .tx-sub{color:#5b21b6}
/* 3D text effects, using Bootstrap's grid and spacing utilities around them. Layered and extruded headlines are one element with stacked text-shadows. The isometric word is real 3D:
aria-hidden copies pushed back with translateZ under the real text. The fold is the real word clipped to its top half,
with an aria-hidden copy of the bottom half turned on the X axis. Screen readers get the word once in every case. */
.tx{min-height:250px;padding:30px 20px;overflow:hidden}
.place-items-center{place-items:center}
.tx.rounded-5{--bs-border-radius-xxl:22px;border-radius:22px!important}
/* A. layered depth: hard-edged shadows in bands of colour */
.tx-retro{background:#fff7ed}
.tx-layer{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:800;font-size:clamp(2.8rem,9vw,4.4rem);line-height:1;letter-spacing:-.01em;color:#be123c;
text-shadow:1px 1px 0 #f59e0b,2px 2px 0 #f59e0b,3px 3px 0 #f59e0b,4px 4px 0 #f59e0b,5px 5px 0 #0f766e,6px 6px 0 #0f766e,7px 7px 0 #0f766e,8px 8px 0 #0f766e,9px 9px 0 #134e4a,10px 10px 0 #134e4a}
.tx-sub{font-size:.78rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:#9a3412}
/* B. extruded block letters: a ramp of darker shadows, then a soft cast shadow */
.tx-block-bg{background:radial-gradient(120% 90% at 50% 0%,#3730a3,#1e1b4b)}
.tx-block{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(3.2rem,12vw,5.4rem);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:#fde047;
text-shadow:0 1px 0 #facc15,0 2px 0 #eab308,0 3px 0 #e0a806,0 4px 0 #d69e05,0 5px 0 #ca8a04,0 6px 0 #b77b04,0 7px 0 #a16207,0 8px 0 #8a5306,0 9px 0 #713f12,
0 10px 2px rgba(0,0,0,.25),0 16px 14px rgba(0,0,0,.45),0 26px 30px rgba(0,0,0,.35)}
.tx-block-bg .tx-sub{color:#c7d2fe}
/* C. isometric word: real text on top, copies stepping down in Z underneath */
.tx-iso-bg{background:linear-gradient(160deg,#0c4a6e,#082f49)}
.tx-iso{display:grid;transform:rotateX(55deg) rotateZ(-40deg);transform-style:preserve-3d}
.tx-iso > span{grid-area:1/1;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(3rem,11vw,4.4rem);line-height:1;letter-spacing:.04em}
.tx-iso-top{color:#a5f3fc;transform:translateZ(0)}
.tx-iso-l{transform:translateZ(calc(var(--i) * -2px))}
.tx-iso-l:nth-child(2){color:#0b3a4f}.tx-iso-l:nth-child(3){color:#0c4058}.tx-iso-l:nth-child(4){color:#0d4661}.tx-iso-l:nth-child(5){color:#0e4c6a}.tx-iso-l:nth-child(6){color:#0f5373}.tx-iso-l:nth-child(7){color:#105a7c}.tx-iso-l:nth-child(8){color:#116185}.tx-iso-l:nth-child(9){color:#12688e}.tx-iso-l:nth-child(10){color:#126f97}.tx-iso-l:nth-child(11){color:#1376a0}
.tx-iso-shadow{color:rgba(2,6,23,.55);transform:translateZ(-26px);filter:blur(4px)}
/* D. folded word: top half flat, bottom half turned back on the X axis */
.tx-fold-bg{background:#f5f3ff}
.tx-fold{display:inline-grid;perspective:420px;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(3rem,11vw,4.8rem);line-height:1;letter-spacing:.02em;text-transform:uppercase}
.tx-fold > span{grid-area:1/1;padding:0 .04em}
.tx-fold-a{color:#6d28d9;clip-path:inset(0 0 50% 0)}
.tx-fold-b{color:#4c1d95;clip-path:inset(50% 0 0 0);transform:rotateX(52deg);transform-origin:50% 50%;
background:linear-gradient(180deg,rgba(76,29,149,0) 50%,rgba(76,29,149,.08) 100%)}
.tx-fold-bg .tx-sub{color:#5b21b6}
Four ways to give a headline depth. Layered depth stacks hard-edged text-shadows in bands of amber and teal under a serif italic, the look of a retro diner sign. Extruded block letters build a yellow word from a ramp of darker shadows one pixel apart, finished with a soft cast shadow, on an indigo panel. The isometric word lays the text on a plane turned with rotateX and rotateZ, with ten copies stepping back in translateZ underneath it, so the letters have real sides that darken with depth. The folded word clips the text to its top half and turns a copy of the bottom half back on the X axis, like a sheet of paper folded along the middle. The first two are one element and one text-shadow value, so they work anywhere text does. The isometric and folded words use aria-hidden copies for the depth while the real text stays in the heading, so screen readers read each word once and the text can still be selected. Font sizes use clamp, so every effect scales down to phone widths.
What’s included
Layered text-shadow bands for a retro sign look
Extruded letters from a ramp of shadows plus a cast shadow
True 3D isometric word with ten translateZ layers
Folded word made with clip-path and rotateX
Decorative copies are aria-hidden, so each word is read once
Accessibility
Every effect is a real h2 with its text in the DOM; the extra copies used for the isometric sides and the folded half are aria-hidden. The red, yellow, cyan and violet text colours all reach at least 4.5:1 against their panels, above the 3:1 needed for large text. Nothing animates, so there is no motion to reduce, and there are no controls to focus.
Customise it
Colours are the color and text-shadow values on .tx-layer, .tx-block, .tx-iso-l and .tx-fold-a and -b; add or remove shadow steps to change the depth. The isometric angle is rotateX(55deg) rotateZ(-40deg) on .tx-iso and the fold is rotateX(52deg) on .tx-fold-b. Tailwind keeps the same values in [text-shadow:] and [transform:] utilities.
