Three colours carry the whole illusion. The top face is the lightest because it faces the sky, the left face sits in the middle, and the right face is the darkest. Keep those three roles consistent across the page and readers stop seeing flat shapes. Break the rule once, with a dark top on a single block, and the entire scene looks wrong.
At a glance
| Face | Lightness | Example |
|---|---|---|
| Top | 72% | #7C9DFF |
| Left | 60% | #4A6FE8 |
| Right | 44% | #2A4DB5 |
Common mistakes
Shadows on the floor sell the idea that a block has weight. A blurred ellipse, skewed to match the grid and placed slightly offset from the light, is usually enough. Real shadows would change with the height of the block, and adding that detail makes towers and stairs look much more convincing.
Download
Questions
Can I use this without JavaScript?
Yes. Every scene in our tutorials is pure HTML and CSS; JavaScript only adds optional interactions.
Does it work on phones?
It does, as long as the scene is scaled with clamp() and never wider than the viewport.
Can I use the code in client work?
Yes. All tutorial code is MIT licensed, so you can use it anywhere with attribution in the source.
Ivo Petrov
This finally made the order of rotations click for me. I had them the wrong way round for weeks.
Nina Ahlberg
Thanks! A follow-up is already in the drafts.
Kofi Mensah
How would you handle text that needs to wrap on one of the faces?
Mateo Rossi
The tip about naming faces instead of colours saved our design system a lot of pain.
Omar Haddad
Same here. Adding will-change on the wrapper fixed it for me.
Gus Lindgren
Thanks for covering reduced motion. It is so often an afterthought.
Soren Dahl
Love the palette. Could you share the exact lightness values?
Hana Sato
The templates are in the downloads section of the reference post.
Rosa Medina
Tiny typo in the second code block: the unit is missing on the translate value.
Eli Novak
Works nicely in Firefox. Safari needed the prefixed transform-style for us.