Shadows in neo-brutalism aren’t subtle. They’re statement pieces that define the aesthetic. Let’s dive deep into creating impactful shadow effects.

The Classic Brutal Shadow

The signature look uses hard, offset shadows:

box-shadow: 4px 4px 0 #000000;

No blur, no spread - just pure, geometric depth.

Bryce Canyon National Park

Layering for Impact

You can create hierarchy through shadow intensity:

  1. Primary elements - 6px offset for maximum presence
  2. Secondary elements - 4px offset for supporting roles
  3. Tertiary elements - 2px offset for subtle depth

Interactive Shadows

The magic happens on hover:

.card {
  box-shadow: 4px 4px 0 #000;
  transition: all 0.15s ease;
}

.card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 #000;
}

This creates the illusion of the element “lifting” toward the user.

“Great design is not just how something looks, but how it feels to interact with.”

Performance Considerations

Hard shadows are GPU-friendly! Unlike blur-heavy shadows, these render quickly and maintain smooth animations even on mobile devices.

Embrace the bold, embrace the shadow!