Back to Hub
Design Sample / Glass Orbit Go to 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.

Create depth with multi-light-source gradient backgrounds
Cards combine blur + edge line + subtle shadow
Ensure text contrast for readability first

AI Request Prompt

Design a futuristic dashboard landing page in Glassmorphism style.

Requirements:
- Background: Multi-layer radial-gradient (#132039 to #245970 to #7b4f72) + blue/pink light orb bleeds
- Cards: backdrop-filter: blur(18px) saturate(135%), bright border (rgba 255,255,255,0.35), deep drop shadow
- Hero: 30px rounded corners, semi-transparent gradient background (rgba 255,255,255,0.24 to 0.1)
- Typography: Futuristic sans-serif (Exo 2) headings, stable body (Noto Sans KR), line-height 1.75
- Colors: Cool blue base + soft pink/mint accents
- Text contrast: Ensure readability on transparent backgrounds with bright text (#eff8ff)
- Motion: Sequential float-in (translateY 14px, 0.8s ease, 0.1s intervals)

Responsive:
- Mobile: Cards stack in 1 column, hero padding reduced
- Desktop: max-width 1080px, cards auto-fit minmax(190px, 1fr)

Restrictions:
- No opaque backgrounds (transparency is essential)
- No simple transparent backgrounds without blur
- Text contrast must not fall below 4.5:1

Output:
1) Color tokens (background layers/cards/text) and layer rules (blur/border/shadow)
2) Hero / Stats (3-column nodes) / CTA structure
3) HTML/CSS code with responsive support