CSS Box Shadow Hover Effects: Interactive Examples

A shadow that changes on hover tells the user something is interactive. These patterns cover lift, glow, color shift, and shrink — four hover behaviors that work on cards, buttons, and links.

The Lift Effect

The most common card hover. The element appears to rise as the cursor approaches it.

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

The two changes work together: the translate moves the element up, the larger shadow simulates a further light source. Both using the same transition timing keeps them in sync.

Color Glow on Hover

Replace the black shadow with a color glow for a more modern effect. Works especially well on dark backgrounds.

.card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease;
}

.card:hover {
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
}

For CTAs and primary buttons, match the glow color to your brand. For general cards, use the element background color at 30-40% opacity.

Sell Custom Apparel — We Handle Printing & Free Shipping

Shadow Shrink Effect

Instead of lifting, some designs flatten on hover — the shadow compresses as if the card is being pressed down by the cursor.

.card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(2px);
}

This effect works well for flat design systems or cards that represent selectable options — it feels like you are choosing them.

Focus Shadow for Keyboard Accessibility

Box-shadow makes excellent focus rings because it does not affect layout the way outline can in some edge cases.

.btn {
  outline: none;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
}

Use :focus-visible rather than :focus to only show the ring for keyboard navigation, not mouse clicks. The 0 0 0 3px pattern creates a visible border-like ring without changing element size.

Frequently Asked Questions

How do I transition box-shadow smoothly on hover?

Add transition: box-shadow 0.2s ease to the base (non-hover) rule. The browser will animate between default and hover shadow values. Keep it between 150ms and 250ms for best feel.

Can I change box-shadow color on hover?

Yes. CSS transitions animate between any two box-shadow values including different colors, as long as both states have the same number of shadows. Animating from no shadow to a colored shadow may jump — use a transparent shadow as the default instead.

Why does my hover transition flicker?

Usually caused by the hover area ending exactly at the element border while transform is moving the element. Add padding or use a wrapper element to increase the hover target area.