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.

Open in the generator →All effects
Isometric 3D

How it works

Isometric 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

Isometric 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

/* Isometric 3D — made with TEXT-FX · https://text-fx.app
 * 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

Related 3D & Depth effects