Card Hover Discovery
5 subtle shadow variations for card hover states. All effects are shadow-only for minimal, professional interactivity.
Baseline: No Hover
Call Forwarding
Route calls to any device seamlessly.
Team Messaging
Collaborate with your team in real-time.
Option 1: Ultra-Light
Barely visible ghost shadow - most subtle possible
Call Forwarding
Route calls to any device seamlessly.
Team Messaging
Collaborate with your team in real-time.
.card-hover-ultra:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}Option 2: Soft Diffuse
Larger blur radius, very light - creates soft halo
Call Forwarding
Route calls to any device seamlessly.
Team Messaging
Collaborate with your team in real-time.
.card-hover-diffuse:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}Option 3: Directional
Offset shadow suggesting light source from top-left
Call Forwarding
Route calls to any device seamlessly.
Team Messaging
Collaborate with your team in real-time.
.card-hover-directional:hover {
box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.05);
}Option 4: Double Layer
Two shadow layers for natural depth - tight + diffuse
Call Forwarding
Route calls to any device seamlessly.
Team Messaging
Collaborate with your team in real-time.
.card-hover-double:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
0 4px 16px rgba(0, 0, 0, 0.03);
}Option 5: Warm Tint
Brand-tinted subtle glow (orange-500 at 6% opacity)
Call Forwarding
Route calls to any device seamlessly.
Team Messaging
Collaborate with your team in real-time.
.card-hover-warm:hover {
box-shadow: 0 2px 10px rgba(249, 115, 22, 0.06);
}Original: card-hover-subtle
The baseline we're comparing against
Call Forwarding
Route calls to any device seamlessly.
Team Messaging
Collaborate with your team in real-time.
.card-hover-subtle:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}Quick Reference
| Option | Shadow Value | Character |
|---|---|---|
| 1. Ultra-Light | 0 1px 4px rgba(0,0,0,0.03) | Barely visible |
| 2. Soft Diffuse | 0 4px 20px rgba(0,0,0,0.04) | Soft halo |
| 3. Directional | 2px 4px 12px rgba(0,0,0,0.05) | Light source feel |
| 4. Double Layer | 0 1px 3px + 0 4px 16px | Natural depth |
| 5. Warm Tint | 0 2px 10px rgba(249,115,22,0.06) | Brand glow |
| Original | 0 2px 8px rgba(0,0,0,0.06) | Baseline |