Back to Hub
Design Sample / Mesh Gradient Go to Hub

Mesh Gradient
Interface

Create soft, dimensional backgrounds with multi-point mesh gradients inspired by Apple's style. In AI prompts, combine "multi-point radial gradient", "frosted glass cards", "vibrant yet soft palette" for refined results.

Layer 4-5 radial-gradients for mesh effect
Light background + translucent cards for airiness
Focus on titles with gradient text
Subtle lift effect on hover

AI Request Prompt

Design a mesh gradient style web landing page.

Style conditions:
- Background: Layer 4-5 radial-gradients on light beige/white (#faf8f6)
- Gradient colors: Violet #6c63ff, pink #f857a6, coral #ff5858, yellow #ffc837
- UI: Translucent cards (backdrop-filter), large radius, subtle borders
- Typography: 800 weight Inter, gradient clip titles, muted color body text
- Motion: 2px lift + shadow expansion on card hover
- Overall mood: Refined and lightweight like Apple/Stripe style

Responsive:
- Mobile (~768px): Single column stack, gradient opacity reduced for performance, card radius scaled down
- Desktop: max-width 1080px, 2-3 column card grid with generous gap

Restrictions:
- No dark backgrounds — keep light and airy base
- No hard borders or heavy shadows — only subtle rgba(0,0,0,0.05) range
- No more than 5 gradient layers — maintain performance

Output:
1) Mesh gradient background CSS code
2) Color tokens and card style definitions
3) Hero/Feature/CTA section HTML/CSS with responsive support