Box Shadow in Tailwind CSS and React Native

Box-shadow works one way in CSS, a different way in Tailwind CSS, and a completely different way in React Native. Here is the practical breakdown so you are not debugging a styling discrepancy for an hour.

Box Shadow in Tailwind CSS

Tailwind provides predefined shadow utilities: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, and shadow-inner.

<div class="shadow-lg rounded-xl bg-white p-6">Card</div>

Each utility maps to a specific box-shadow value:

Utility	CSS Value (simplified)
shadow-sm	0 1px 2px rgba(0,0,0,0.05)
shadow	0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)
shadow-md	0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)
shadow-lg	0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)
shadow-xl	0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04)
shadow-inner	inset 0 2px 4px rgba(0,0,0,0.06)

Custom Box Shadows in Tailwind

To use a custom shadow value in Tailwind, add it to your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
        'card-hover': '0 8px 24px rgba(0, 0, 0, 0.14)',
        'neon-blue': '0 0 12px rgba(88, 166, 255, 0.6)',
      }
    }
  }
}

Then use them as utilities: class="shadow-card hover:shadow-card-hover"

For one-off arbitrary values, use Tailwind JIT bracket syntax:

<div class="shadow-[0_4px_16px_rgba(0,0,0,0.12)]"></div>

Underscores replace spaces in the bracket syntax.

Sell Custom Apparel — We Handle Printing & Free Shipping

Box Shadow in React Native

React Native does not support CSS box-shadow. It uses separate platform-specific shadow props instead.

iOS shadow props

const styles = StyleSheet.create({
  card: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    backgroundColor: '#fff', // required
    borderRadius: 12,
  }
})

Android elevation

const styles = StyleSheet.create({
  card: {
    elevation: 4, // Android-only
    backgroundColor: '#fff', // required
    borderRadius: 12,
  }
})

iOS uses the four shadow props. Android uses elevation. For cross-platform shadows, set both on the same component — each platform reads only its own props.

React Native Shadow Limitations

No colored shadows on Android. Elevation shadows are always black on Android. Only iOS supports shadowColor with non-black values.

backgroundColor is required. React Native shadows do not render on transparent backgrounds. The view must have a backgroundColor set.

No blur radius control on Android. Elevation is a single integer with no fine-grained control. The blur and spread are determined by Android material design system defaults.

No inset shadows. React Native has no equivalent to CSS inset box-shadow.

For more Android control, some developers use react-native-shadow-2 which renders SVG drop shadows as an alternative to the elevation prop.

Frequently Asked Questions

How do I add a custom box-shadow in Tailwind without editing config?

Use the arbitrary value syntax: class="shadow-[0_4px_16px_rgba(0,0,0,0.12)]". Underscores replace spaces in bracket notation. This works with JIT mode (default in Tailwind v3+).

Does React Native support box-shadow?

Not as CSS syntax. Use shadowColor, shadowOffset, shadowOpacity, and shadowRadius for iOS. Use elevation for Android. For cross-platform, set both on the same component.

Why does my Tailwind shadow disappear in dark mode?

Tailwind shadows use rgba black which becomes invisible on dark backgrounds. Add dark mode variants in your config or use CSS custom properties to swap shadow values in dark mode.