React Native Shadow Generator

What the React Native shadow generator does

Shadows are one of the few things React Native handles differently on each platform: iOS uses four shadow* properties, Android uses a single elevation, and matching them by eye is tedious. This generator lets you adjust offset, blur, opacity and colour with a preview, and outputs a style object containing both the iOS shadow properties and an Android elevation that looks equivalent — plus the new cross-platform boxShadow syntax for recent versions. Runs in your browser.

The output

const styles = StyleSheet.create({
  card: {
    // iOS
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 6,
    // Android
    elevation: 6,
    // Needed on both: shadows only render on a solid background
    backgroundColor: "#fff",
  },
});

How the two platforms differ

	iOS	Android (elevation)
Control	Colour, offset, opacity, radius — full control	One number; colour and offset fixed by the system
Direction	Any offset	Always from above (light source at the top)
Colour	Any	Black only (custom shadowColor on API 28+ is partially supported)
Draw order	Independent of layout	Higher elevation also draws on top of lower siblings
Overflow	Renders outside the view	Clipped by parents with overflow: hidden

The generator maps blur radius and offset to an elevation value that produces a visually similar depth. Exact parity is impossible; the aim is that a card looks “lifted the same amount” on both platforms.

Elevation reference

Elevation	Looks like	Use
1–2	Barely lifted	Cards at rest, list items
4	Clearly lifted	Raised buttons, app bar
6–8	Floating	FAB at rest, menus, snackbars
12–16	High	Dialogs, bottom sheets, FAB pressed
24	Highest	Modals over dimmed content

These follow the Material Design elevation scale that Android uses natively.

Gotchas

Set a backgroundColor. On both platforms a view with no background renders no shadow (iOS draws a shadow for each child instead, which is slow and looks wrong).
overflow: hidden clips the shadow on Android and, for children, on iOS. Put the shadow on a wrapper without overflow hidden and clip the inner view.
Android elevation changes z-order. A shadowed element may cover an absolutely positioned sibling with lower elevation.
Performance: iOS shadows on many list items cost rendering time; consider shouldRasterizeIOS or a pre-rendered shadow image for long lists.
shadowColor on Android works only on API 28+ and only tints; it cannot change offset.

The new boxShadow property

React Native 0.76+ (New Architecture) supports a CSS-like boxShadow style — boxShadow: "0 4px 6px rgba(0,0,0,0.15)" — that renders consistently on both platforms with full control over offset, blur, spread and colour, and supports multiple shadows. If your app targets 0.76 or later with the New Architecture enabled, prefer it; the generator includes it alongside the legacy properties. Expo SDK 52+ supports it too.

Frequently asked questions

Why does my shadow not show on Android?

Almost always a missing backgroundColor, an ancestor with overflow: hidden, or elevation set on a view that is not a plain View (some components ignore it).

Can I make an inner (inset) shadow?

Not with the legacy properties. The new boxShadow supports inset; otherwise fake it with a gradient overlay.

How do I match a Figma shadow?

Figma's X/Y map to shadowOffset, blur to shadowRadius (roughly blur ÷ 2), and the colour alpha to shadowOpacity. The generator's preview lets you match by eye.

Does the shadow work on web (React Native Web)?

React Native Web converts the shadow* properties to a CSS box-shadow, and supports boxShadow directly.

Should I use a library like react-native-shadow-2?

Those draw shadows with SVG for identical results across platforms, at some performance cost. Use them when exact parity matters; native shadows otherwise.

Are my values stored?

No. The generator runs entirely in your browser.