Floating 3D Hexagonal Shield

Colours in this gradient

• #020617
• #06b6d4
• #3b82f6
• #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="hex-stage">
  <div class="hex-shield">
    <div class="hex-face hex-front">
      <div class="hex-inner">
        <div class="hex-glyph">⚡</div>
        <div class="hex-title">CORE SHIELD</div>
        <div class="hex-sub">QUANTUM LAYER</div>
      </div>
    </div>
    <div class="hex-ring"></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 floating 3D hexagonal badge shield using only HTML and CSS.

Requirements:
- CSS polygon clip-path for authentic hexagon geometry: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%).
- 3D perspective stage with levitation keyframes altering translateY, rotateX, and rotateY.
- Dashed orbital ring spinning on an angled 3D plane around the badge.
- Glowing drop-shadow and cyber aesthetic.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Use clip-path: polygon() to produce a symmetric 6-sided hexagon.

2. 2

   Nest the shape in a container with transform-style: preserve-3d.

3. 3

   Animate multi-axis oscillation and floating physics with CSS keyframes.

Customisation tips

• Add a dashed rotating ring tilted with rotateX(75deg) for a sci-fi gyro effect.

More 3d scenes