Retro 3D

How it works

Retro 3D is a static 3d & depth text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Retro 3D exposes 2 dedicated controls — Hue and Depth — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Retro 3D — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Major Mono Display', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Major Mono Display', monospace;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.text-effect {
  color: hsl(195 90% 66%);
  text-shadow:
    1px 0 0 hsl(195 25% 12%),
    0 1px 0 hsl(195 25% 12%),
    -1px 1px 0 hsl(35 80% 50%),
    -2px 2px 0 hsl(35 80% 50%),
    -3px 3px 0 hsl(35 80% 50%),
    -4px 4px 0 hsl(35 80% 50%),
    -5px 5px 0 hsl(35 80% 50%),
    -6px 6px 0 hsl(35 80% 50%),
    -7px 7px 0 hsl(35 80% 50%),
    -8px 8px 0 hsl(35 80% 50%),
    -9px 9px 0 hsl(35 80% 50%),
    -10px 10px 0 hsl(35 80% 50%),
    -11px 13px 8px rgba(0,0,0,.35);
}

Related 3D & Depth effects

• 3D Extrude
• Isometric 3D
• Long Shadow
• Paper Cutout
• Perspective Tilt