3D Quantum Portal Stargate

Colours in this gradient

• #020617
• #06b6d4
• #a855f7
• #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="portal-stage">
  <div class="portal-ring-outer">
    <div class="portal-core-vortex"></div>
    <div class="portal-conduit pc-1"></div>
    <div class="portal-conduit pc-2"></div>
    <div class="portal-glyph pg-1">✦</div>
    <div class="portal-glyph pg-2">◆</div>
    <div class="portal-glyph pg-3">▲</div>
    <div class="portal-glyph pg-4">●</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 sci-fi quantum stargate portal ring in pure HTML and CSS.

Requirements:
- Circular 3D ring with rotateX(45deg) perspective tilt.
- Glowing radial gradient dimensional vortex center with blur effect.
- Spinning dashed orbital conduits and glyph nodes.
- 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 the portal ring.

2. 2

   Add radial gradient core with pulse animation.

3. 3

   Attach dashed rotating rings around the outer perimeter.

Customisation tips

• Pairing an outer dashed spin with a pulsating blur vortex core creates strong sci-fi depth.

More 3d scenes