Retro 3D
3D & Depth · Static · pure CSS
Two-tone 80s 3D — a bright face over a saturated offset slab with a contrast outline. Bold arcade/retro headline energy.
CSS
/* Retro 3D — generated with TEXT-FX
* 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);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- 3D & Depth
- Type
- Static
- Browser support
- All modern browsers
- Capabilities
- pure