3D Floating Gemstone Diamond Prism

Colours in this gradient

• #020617
• #38bdf8
• #c084fc
• #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="dia-stage">
  <div class="dia-prism">
    <div class="dia-top">
      <div class="dt-face df-1"></div>
      <div class="dt-face df-2"></div>
      <div class="dt-face df-3"></div>
      <div class="dt-face df-4"></div>
    </div>
    <div class="dia-bot">
      <div class="db-face db-1"></div>
      <div class="db-face db-2"></div>
      <div class="db-face db-3"></div>
      <div class="db-face db-4"></div>
    </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 spinning 3D diamond gemstone crystal in pure HTML and CSS.

Requirements:
- 8 triangular CSS border faces forming top and bottom bipyramidal gem facets.
- Translucent iridescent faces (cyan, violet, pink) with drop-shadow glow.
- Continuous multi-axis tumbling rotation.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Build top pyramid using upward triangles and bottom inverted pyramid with downward triangles.

2. 2

   Offset and rotate facets by 90 degrees around Y-axis.

3. 3

   Animate multi-axis keyframes.

Customisation tips

• Semi-transparent borders allow inner facet intersections to shimmer through.

More 3d scenes