CSS Box Shadow for Cards and Buttons: Copy-Paste Examples

Cards and buttons are where box-shadow earns its keep. A card without shadow looks like a flat rectangle. A button without shadow has no depth. These examples are written, tested, and ready to copy.

Card Shadow Basics

A card is just a container with a white background, border-radius, and padding. The shadow is what makes it feel like it lifts off the page.

Subtle card shadow

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 24px;
  background: #fff;
}

Medium card shadow

.card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
}

Prominent card shadow

.card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  border-radius: 16px;
}

The pattern is consistent: zero horizontal offset, small-to-medium vertical offset, blur roughly double the vertical offset, low opacity black.

Button Shadow Styles

Button shadows communicate clickability. Hard shadows look like physical buttons. Soft shadows look elevated. Inset shadows simulate a pressed state.

Default button shadow

.btn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

Hover state — more lift

.btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

Active / pressed state — inset

.btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  transform: translateY(1px);
}

Pair the shadow change with a transform: translateY() on hover for a convincing lift effect. Lift up — shadow grows; press down — shadow shrinks or inverts.

Sell Custom Apparel — We Handle Printing & Free Shipping

Colored Shadows for Branded UI

Black shadows are safe. Colored shadows match your brand and make cards feel less generic.

Blue card (primary action)

.card-primary {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}

Green card (success / positive)

.card-success {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}

The trick: use the same color as the background at 30-40% opacity. The shadow reads as a color bloom, not a dirty stain.

Card Hover Effect: Lift on Hover

Clickable cards need a visual response to cursor hover. This pattern works on all browsers:

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

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}

Keep the transition duration between 150ms and 250ms. Faster feels instant (jarring). Slower feels laggy. 200ms is the sweet spot.

Common Card and Button Shadow Mistakes

Too much opacity. rgba(0,0,0,0.5) looks like a hard drop shadow from 2010. Keep it under 0.2 for most cards.

Matching the text color. If your card text is black, keep the shadow black too. Mixing a blue shadow on a card with red text looks unintentional.

No transition on hover. An instant shadow jump is jarring. Always add transition: box-shadow 0.2s ease to interactive elements.

Using filter: drop-shadow instead of box-shadow. Drop-shadow follows the element shape including transparency. Box-shadow follows the bounding box. For rectangular cards and buttons, box-shadow is almost always the right choice.

Frequently Asked Questions

What is a good box-shadow value for a card?

A common starting point: box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08). Adjust the blur and opacity to match how elevated the card should feel. Higher elevation = more blur + slightly higher opacity.

How do I make a button look pressed with box-shadow?

Use an inset shadow on the :active state: box-shadow: inset 0 2px 4px rgba(0,0,0,0.15). Combine it with transform: translateY(1px) to simulate physical depression.

Why does my card shadow look different on mobile?

Box-shadow renders consistently across devices. The difference is usually screen brightness or contrast settings. If it looks too light on mobile, slightly increase the opacity value.