Iso
metric
3D
CSS-generated three-dimensional objects - cubes, buildings, icons - created purely with transforms, clip-paths, and layered box-shadows. No images, no WebGL, no canvas. Pure CSS depth.
Left: polygon(0 25,50% 50,50% 100,0 75)
Right: polygon(50% 50,100% 25,100% 75,50% 100)
to create buildings of any height
points y to desired height
Bottom: close the shape
Active state: translate to shadow
:active { transform: translate(4px,4px);
box-shadow: none; }
Gradient fill
// 3D Buttons
// Input Fields
// Cube Icon Grid
The base unit of all isometric illustration - three faces, three shades, one consistent light source.
Extend cube side faces downward to create towers. Stack cubes of different sizes for complex structures.
Isometric bar charts give data visualisation a tactile, spatial quality - each bar a physical column.
Dashboard
Render volume · 7d
30° / 45° is Sacred
Isometric projection uses rotateX(30deg) rotateY(-45deg) - or the 2D equivalent with skewX(-30deg)/skewY(30deg). Deviating from this angle breaks the shared spatial logic immediately.
One Light Source, Always
Top face = lightest. Left = mid. Right = darkest. The directional lighting must be consistent across every object in the scene. Mix up the source direction and the illusion collapses.
box-shadow as Depth
For UI elements like buttons and cards, offset box-shadow (4px 4px 0 darkerColour) simulates the isometric depth without full 3D transforms - maintaining interactivity and accessibility.
One Hue, Three Shades
Each object should use three values of a single hue - not three different colours. This creates material coherence. Mix hues between objects but keep each object monochromatic.