Back to Hub
Design Sample / Aurora Gradient Go to Hub

AURORA
GRADIENT

Place organically flowing gradients like auroras in the background, and layer content on glass panels to create visual depth. When requesting AI, combine keywords like "multi-color blur orbs", "organic movement", and "color bleeding on dark backgrounds" for reliable results.

Use 2-3 background orbs with blur 100px+
Separate content panels with backdrop-filter
Apply gradient clip to text for visual unity
Add vitality with slow drift motion

AI Request Prompt

Design an aurora-inspired web landing page.

Style conditions:
- Background: Place 2-3 purple/cyan/pink blur orbs on deep dark (#0a0a1a range)
- Process orbs with CSS filter:blur(100px+) and add slow animation
- UI: Semi-transparent glass panels (backdrop-filter:blur), subtle borders
- Typography: Gradient clip text for titles, high-readability sans-serif for body
- Colors: Purple #7c4dff, cyan #00e5ff, pink #ff6090 as core palette
- Motion: Background orb drift animation, title shimmer, sequential card appearance

Responsive:
- Mobile (~768px): Single column stack, orb blur reduced for performance, title font scaled down
- Desktop: max-width 1100px, 2-3 column feature grid

Restrictions:
- No solid flat backgrounds — always layer blur orbs for depth
- No borders thicker than 1px — rely on glass transparency for separation
- No warm colors (orange, yellow) — stay within cool purple/cyan/pink range

Output:
1) Color tokens and aurora orb settings
2) Hero/Feature/CTA section structure
3) HTML/CSS code with responsive support