Hub

Glass Layers
Around Data

If glassmorphism is treated as mere "transparent cards," the result feels flat. As shown on this page, you need to request background depth, layer transparency variations, and edge highlights together to achieve a dense result.

Orbit Ring

blur(12px) Foreground layer — crisp edges, lightest glass
blur(18px) Mid layer — softened depth, medium frost
blur(24px) Back layer — heavy diffusion, deep glass

Depth Stack

Layer 1 — bg: 0.1 alpha border 0.15
Layer 2 — bg: 0.2 alpha border 0.28
Layer 3 — bg: 0.3 alpha border 0.40
18px Blur
0.28 Border Opacity
0.24 BG Alpha
28px Shadow Offset

Glass Orbit builds layered transparency through three mechanisms: backdrop-filter blur for frosted depth, graduated border opacity to separate planes, and inset box-shadows that simulate internal light refraction. Each element floats at a distinct depth, creating a convincing orbital composition where panels feel physically stacked in space rather than painted onto a flat canvas.

AI Request Prompt

Design a landing page in Glass Orbit style — frosted-glass panels floating over a deep multi-gradient cosmos.

COLOR TOKENS:
--bg1: #132039
--bg2: #245970
--bg3: #7b4f72
--text: #eff8ff
--border: rgba(255, 255, 255, 0.28)
--card-border: rgba(255, 255, 255, 0.35)
--card-bg: rgba(17, 22, 40, 0.25)
--hero-bg-start: rgba(255, 255, 255, 0.24)
--hero-bg-end: rgba(255, 255, 255, 0.1)
Background bleed: radial-gradient(circle at 12% 18%, rgba(37,123,255,0.42), transparent 38%), radial-gradient(circle at 80% 82%, rgba(237,124,195,0.28), transparent 34%).
No other colors.

TYPOGRAPHY:
Heading: "Exo 2" 700, tracking default
Body: "Noto Sans" 400
Scale: clamp(2rem, 5.8vw, 4.8rem) for h1
Body line-height: 1.75
Heading line-height: 1

UI:
Hero card: border-radius 30px, border 1px solid var(--border), backdrop-filter blur(18px) saturate(135%), box-shadow 0 28px 45px rgba(0,0,0,0.26).
Node cards: border-radius 16px, border 1px solid rgba(255,255,255,0.35), padding 14px, bg rgba(17,22,40,0.25).
Prompt box: border-radius 18px, border 1px solid rgba(255,255,255,0.42), bg rgba(9,15,28,0.55).
Buttons: pill shape (border-radius 999px), 1px solid rgba(255,255,255,0.52), bg rgba(255,255,255,0.1).

LAYOUT:
Content max-width: min(1080px, 92vw)
Wrapper padding: 30px 0 78px
Hero padding: clamp(22px, 5vw, 50px)
Card grid: repeat(auto-fit, minmax(190px, 1fr)), gap 12px
Lead max-width: 680px

MOTION:
Entrance: translateY(14px) → 0, opacity 0 → 1, 800ms ease, stagger 100ms per card
Hover: none specified — keep subtle
Respect prefers-reduced-motion.

RESPONSIVE:
768px: card grid collapses to 1 column, hero padding reduces via clamp
1024px: full 3-column auto-fit grid, max-width 1080px layout

FORBIDDEN:
- Opaque solid backgrounds (transparency is essential to the style)
- Blur-less transparent panels (all glass panels must combine blur + border + shadow)
- Text contrast below 4.5:1 on any transparent surface
- Serif or monospace fonts
- Horizontal scroll at any viewport
- Sharp corners (minimum border-radius 16px)

OUTPUT:
1) Color + typography tokens as CSS custom properties
2) Hero / Stats (3-column node grid) / CTA structure
3) Semantic HTML + CSS with responsive support