Hub
Fusion / Holo x Glass Go to Hub

Fluid Glass Morphism

Where holographic color meets glass clarity. Iridescent rainbow gradients refract through frosted transparent surfaces, creating depth through layered translucency.

Design Specifications

Surface Blur

30px

Primary glass panel backdrop-filter blur intensity for frosted depth

Saturation

150%

Backdrop saturate multiplier amplifying holographic color bleed

Hue Shift

60deg

Peak hue-rotate angle in iridescent background animation cycle

Depth Layers

Layer 01 — Magenta

Background Plane

z-index: 1 · opacity: 0.06 · blur: 18px

Layer 02 — Purple

Mid-depth Surface

z-index: 2 · translateZ: 30px · blur: 18px

Layer 03 — Aqua

Floating Panel

z-index: 3 · translateZ: 60px · blur: 18px

Layer 04 — Clear

Foreground Element

z-index: 4 · translateZ: 90px · blur: 18px

Orbital Glass Element

Holographic Lens

A glass card rotating in 3D space with iridescent border glow and frosted transparency

Color Spectrum Reflection

Iridescent gradient — continuous hue rotation across full visible spectrum 360deg

Holographic Prism

Conic Gradient Lens

A circular glass element with a holographic conic-gradient fill — refracting all three color tokens through a frosted inner surface.

backdrop-filter conic-gradient hue-rotate saturate translucent

Glass Surface Metrics

30px

Blur Level

0.04

Opacity

150%

Saturate

60deg

Hue Shift

20px

Card Blur

30px

Border Radius

AI Request Prompt

Design a landing page in Holo Glass fusion style — combining Holographic Fluid dreamy gradients with Glass Orbit translucent depth.

COLOR TOKENS:
--c1: #ff007f (magenta orb)
--c2: #7928ca (purple orb)
--c3: #00d2ff (aqua orb)
--bg: #050510
--text: #fff
--text-muted: #e2e8f0
--glass-surface: rgba(255, 255, 255, 0.03)
--glass-card: rgba(255, 255, 255, 0.05)
--glass-card-hover: rgba(255, 255, 255, 0.1)
--border: rgba(255, 255, 255, 0.15)
--border-highlight: rgba(255, 255, 255, 0.3)
--border-card: rgba(255, 255, 255, 0.1)
No other colors.

TYPOGRAPHY:
- Headings: 'Outfit', sans-serif — font-weight: 300 | 600
- Body: 'Exo 2', sans-serif — font-weight: 400 | 600 | 700
- Hero h1: clamp(2.5rem, 5vw, 4.5rem), letter-spacing: -0.02em, text-shadow: 0 5px 20px rgba(255,255,255,0.2)
- Subtitle: 1.1rem, line-height: 1.6, font-weight: 300, opacity: 0.8

UI:
- Glass hero panel: border-radius: 30px, backdrop-filter: blur(30px) saturate(150%), border-top and border-left use --border-highlight for light-refraction effect, box-shadow: 0 25px 50px rgba(0,0,0,0.5)
- Glass cards: border-radius: 20px, backdrop-filter: blur(20px), background: --glass-card, border: 1px solid --border-card
- Buttons: background: #fff, color: #000, border-radius: 30px, padding: 12px 24px, font-weight: bold

LAYOUT:
- Wrapper: max-width: 1100px, margin: 0 auto, padding: 50px 20px
- Card grid: display: grid, grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)), gap: 20px
- Hero panel: padding: 60px 40px, text-align: center

MOTION:
- Holographic orbs: 3 radial-gradient circles (20% 30%, 80% 70%, 50% 50%), filter: blur(100px), opacity: 0.5, animation: spin 20s linear infinite (full 360deg rotation)
- Card hover: transform: translateY(-5px), transition: transform 0.3s, background 0.3s
- Button hover: transform: scale(1.02), box-shadow: 0 0 20px rgba(255,255,255,0.3), transition: 0.3s

RESPONSIVE:
- Desktop (>768px): max-width 1100px, 2+ column auto-fit card grid, 3 holographic orbs, full blur(100px)
- Mobile (<=768px): single-column card stack, reduce orb blur to 60px for GPU performance, hero padding: 30px 20px

FORBIDDEN:
- Opaque solid card backgrounds — every surface must be translucent glass
- Flat colors without backdrop bleed-through
- Warm tones (orange, yellow, brown) — strictly cool magenta/aqua/purple spectrum
- border-radius below 16px on any panel
- Heavy drop shadows on cards — depth comes from glass layering only

OUTPUT:
1) Holographic orb animation CSS (@keyframes spin, radial-gradient setup)
2) Glass panel component system (blur, saturate, highlight borders)
3) Full HTML/CSS with responsive breakpoints