3D Spinning Gold Crypto Coin

Colours in this gradient

• #090d16
• #f59e0b
• #fbbf24
• #ffffff

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="coin-stage">
  <div class="coin-container">
    <div class="coin-disc">
      <div class="coin-face coin-front">
        <div class="coin-rim"></div>
        <div class="coin-glyph">₿</div>
      </div>
      <div class="coin-face coin-back">
        <div class="coin-rim"></div>
        <div class="coin-glyph">⚡</div>
      </div>
    </div>
  </div>
  <div class="coin-shadow"></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 spinning 3D gold crypto coin in pure HTML and CSS.

Requirements:
- CSS 3D perspective stage with backface-visibility: hidden.
- Front and back coin faces with translateZ(6px) depth.
- Continuous 360-degree rotateY spin animation.
- Synchronized vertical floating and floor shadow pulsation.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Create front and back circular faces separated by translateZ in a preserve-3d container.

2. 2

   Animate rotateY from 0 to 360 degrees infinitely.

3. 3

   Add vertical levitation with synchronized scale on the ground shadow.

Customisation tips

• Inset dashed border creates an authentic minted coin edge rim.

More 3d scenes