3D Low-Poly Voxel Island Block

Colours in this gradient

• #090d16
• #10b981
• #78350f
• #38bdf8

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="island-stage">
  <div class="island-world">
    <div class="voxel-cube">
      <div class="v-face v-top">🌱</div>
      <div class="v-face v-front"></div>
      <div class="v-face v-back"></div>
      <div class="v-face v-left"></div>
      <div class="v-face v-right"></div>
      <div class="v-face v-bottom"></div>
    </div>
    <div class="island-cloud ic-1">☁</div>
    <div class="island-cloud ic-2">☁</div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a 3D isometric floating low-poly voxel terrain block with hovering clouds in HTML and CSS.

Requirements:
- True 3D cube assembled using translateZ(70px) on 6 faces.
- Isometric perspective angle: rotateX(60deg) rotateZ(-45deg).
- Top face styled with green turf, side faces with dirt/stone strata gradients.
- Floating clouds offset on Z-axis with drift animations.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Assemble 6 faces of a 140px cube inside a transform-style: preserve-3d container.

2. 2

   Apply isometric angles rotateX(60deg) rotateZ(-45deg) on wrapper.

3. 3

   Add vertical oscillation keyframes.

Customisation tips

• Darken the left face slightly (e.g. #047857) to simulate directional isometric sunlight.

More 3d scenes