Create isometric shadows with pseudo-elements

Colour contrast still applies to illustrations that carry meaning. A bar chart drawn as blocks needs enough contrast between the bars and the floor, and labels on the faces need the same contrast as body text. Decorative scenes have more freedom, but we still avoid pale blocks on a pale background.

Shadows that sell the weight

Design tokens keep the whole team in step. We name colours by their role, such as face-top, face-left and face-right, rather than by hue. When we switched the site to a violet accent for a campaign, only the token values changed. Every illustration, button and chart followed without anyone opening a single component.

1. Set the unit

   Define --unit: 2rem on the scene so every size derives from one value.

2. Build the columns

   Read each value from a data-value attribute and set the block height with calc().

3. Label the bars

   Keep labels flat and upright below the chart so they stay readable.

4. Describe the chart

   Add a visually hidden table with the same numbers for screen readers.

The code

Hover effects on isometric blocks work best when they follow the same rules as the static scene. Lift a block along its vertical axis, deepen its shadow on the floor, and leave the other blocks alone. Moving a block sideways, or changing its angle, breaks the projection and makes the scene feel unstable.

SVG is often the better choice for complex scenes. CSS cubes are fun to build and easy to animate, but a city block made of hundreds of divs is hard to change and heavy to render. We draw the static parts in SVG, keep the interactive blocks in CSS, and layer the two together.

Game artists have a name for the pixel-art version of isometric: two-to-one. Lines climb one pixel for every two across, which gives clean, stair-stepped edges instead of jagged ones. The angle is about 26.6 degrees rather than 30, and almost nobody notices, which is a nice reminder that looking right beats being exact.

Colours used

Lessons from the workshop

Readers often ask whether isometric art is still a trend or already a cliché. Our answer is that the style is a tool, like a chart type. It is excellent for explaining structure and relationships, and it is a poor choice for emotion or narrative. Used for the right job, it never really goes out of date.