Create an isometric grid background with gradients

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.

When to switch to SVG

Tile engines figured out draw order decades ago. Sort by the sum of the column and row, draw from the smallest sum to the largest, and most scenes just work. Tall objects that span several tiles need special care, but the simple rule covers floors, walls and small props, which is most of what a blog illustration needs.

1. Sketch the layout

   Draw the room on triangle-grid paper and number the tiles by column and row.

2. Create the grid

   Use display: grid with equal columns and rows on the tilted floor.

3. Place the furniture

   Position each block with grid-area and sort the markup by depth.

4. Add the walls

   Two extra planes, rotated upright, close the room at the back.

5. Check it on a phone

   Scale the scene with clamp() so it never overflows the viewport.

The code

Isometric drawing keeps every parallel line parallel. There is no horizon and no vanishing point, so a block at the back of the scene is exactly as large as one at the front. That sounds like a limitation, but it is the reason the style works so well for diagrams: you can measure anything, compare anything, and line things up without fighting perspective.

Before we publish any illustration we run it through a short review. Is the light direction consistent? Does every block sit on the grid? Is the art hidden from screen readers where it is decorative? Does it survive forced colours mode? It takes five minutes and catches most of the problems we used to fix after launch.

Grids are the backbone of every scene we draw. A single grid unit decides tile width, block height and spacing, which is why our illustrations line up even when three different people made them. When something looks off, the first thing we check is whether one element quietly ignored the grid.

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.

Browser support for 3D transforms is excellent today, with a few sharp edges. The main one is that certain properties, such as overflow hidden or some filters, quietly flatten a preserve-3d context. If a face disappears or a block turns flat, look for one of those on an ancestor before you start rewriting your transforms.

const sorted = tiles.toSorted((a, b) => (a.x + a.y) - (b.x + b.y));for (const tile of sorted) {	scene.append(tile.element);}

<label class="toggle">	<input type="checkbox">	<span class="block"></span>	Dark mode</label>

.toggle input:checked + .block {	translate: 2rem 0;}

toggle.addEventListener('change', (event) => {	document.body.classList.toggle('dark', event.target.checked);});

Colours used

Testing on real devices

We keep every demo in a small repository with one folder per post. Each folder has the HTML, the CSS and a short note on what we tried and dropped. Months later, when a reader asks why a tutorial does something a certain way, the note usually has the answer and saves us a long investigation.