视觉风格: Glassmorphism

Card Stack Layout

Card Stack

Create visual depth with layered glass cards that stack and fan out, perfect for showcasing options.

Choose Your Plan

Click arrows or cards to browse options

Starter

Perfect for individuals

$9/mo

5 Projects
Basic Analytics
Email Support

Popular

Professional

For growing teams

$29/mo

Unlimited Projects
Advanced Analytics
Priority Support
Custom Domain

Enterprise

For large organizations

$99/mo

Everything in Pro
Dedicated Manager
SLA Guarantee
Custom Integrations
On-premise Option

Glass Palette

Colors that glow through frosted glass

Deep Blue

#1e1b4b

Purple

#7c3aed

Cyan

#06b6d4

Pink

#ec4899

Glass White

#ffffff

Stack Variations

Different arrangements for glass cards

Vertical Stack

Cards offset vertically

Fan Out

Cards rotate slightly

3D Perspective

Cards tilt back in space

Design Principles

Key patterns for glassmorphism card stacks

Glass Effect

bg-white/10 backdrop-blur-xl for frosted glass

Subtle Borders

border border-white/20 for glass edges

Gradient Backgrounds

Rich gradients behind glass elements

Soft Shadows

shadow-xl with low opacity for depth

Transform Stack

scale and translateY for layering

Smooth Transitions

transition-all duration-500 for animations

Use Cases

When to use Card Stack layout

Pricing Plans

Showcase different tiers with visual hierarchy

Product Carousel

Browse products with swipe interactions

Onboarding Steps

Guide users through setup process

Card Games

Tinder-style swipe interactions