3D Layered Glass Card Fan

Colours in this gradient

• #0f172a
• #38bdf8
• #818cf8
• #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="fan-stage">
  <div class="fan-deck">
    <div class="fan-card fc-bottom">
      <div class="fc-badge">DATABASE LAYER</div>
      <b>Global Shard #03</b>
    </div>
    <div class="fan-card fc-mid">
      <div class="fc-badge">SECURITY PROXY</div>
      <b>mTLS Zero-Trust Gateway</b>
    </div>
    <div class="fan-card fc-top">
      <div class="fc-badge">API INGESTION</div>
      <b>Serverless Edge Worker</b>
    </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 layered frosted glass card fan stack in pure HTML and CSS.

Requirements:
- 3 translucent glass cards stacked with translateZ spacing (0px, 40px, 80px).
- Isometric perspective deck: rotateX(55deg) rotateZ(-35deg).
- Hover state expands the cards vertically with increased Z elevation (translateZ(160px)).
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Set perspective on container and preserve-3d on deck wrapper.

2. 2

   Separate three glass cards using translateZ.

3. 3

   Expand Z-translation and Y-offset smoothly on hover.

Customisation tips

• Layering glass cards creates realistic physical refraction and depth.

More 3d scenes