Isometric 3D
3D & Depth · Static · pure CSS
An isometric extrude at a fixed 2:1 pixel-art angle, with a lightness gradient down the side wall for real iso depth. Retro-game energy.
CSS
/* Isometric 3D — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Bungee', cursive (load from Google Fonts).
*/
.text-effect {
font-family: 'Bungee', cursive;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
color: hsl(237 70% 70%);
text-shadow:
2px 1px 0 hsl(237 55% 46%),
4px 2px 0 hsl(237 55% 45%),
6px 3px 0 hsl(237 55% 44%),
8px 4px 0 hsl(237 55% 43%),
10px 5px 0 hsl(237 55% 42%),
12px 6px 0 hsl(237 55% 41%),
14px 7px 0 hsl(237 55% 40%),
16px 8px 0 hsl(237 55% 39%),
18px 9px 0 hsl(237 55% 38%),
20px 10px 0 hsl(237 55% 37%),
22px 11px 0 hsl(237 55% 36%),
24px 12px 0 hsl(237 55% 35%),
26px 13px 0 hsl(237 55% 34%),
28px 14px 0 hsl(237 55% 33%),
30px 15px 0 hsl(237 55% 32%),
32px 16px 0 hsl(237 55% 31%),
34px 17px 0 hsl(237 55% 30%),
36px 18px 0 hsl(237 55% 29%),
38px 19px 0 hsl(237 55% 28%),
40px 20px 0 hsl(237 55% 27%),
42px 21px 0 hsl(237 55% 26%),
44px 22px 0 hsl(237 55% 25%),
46px 23px 0 hsl(237 55% 24%),
48px 24px 10px rgba(0,0,0,.4);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- 3D & Depth
- Type
- Static
- Browser support
- All modern browsers
- Capabilities
- pure