React Native Shadow Generator
Generate matching iOS shadow props (shadowColor, shadowOffset, shadowOpacity, shadowRadius) and the Android elevation for React Native from one depth value, with a live preview and copy-ready StyleSheet, style-object or boxShadow output.
Input
The preset derives every iOS prop from one Material elevation, so both platforms look alike.
Material elevation, 1-24. Also used directly as the Android `elevation`.
iOS only — Android draws elevation shadows in its own system color.
Output
Your shadow will appear here.
The same shadow as CSS `box-shadow` — what react-native-web needs, since it ignores `elevation` and the iOS shadow props.
Guides
React Native has two shadow systems that don't talk to each other. iOS reads shadowColor, shadowOffset, shadowOpacity and shadowRadius; Android ignores all four and reads a single elevation number, drawing the shadow itself. Getting a card to look the same on both is the part that eats the afternoon.
This generator does the matching for you: pick one depth and it emits both halves at once, with a live preview of the result and copy-ready code.
How to use it
- Leave Shadow Values on Depth preset and drag Shadow Depth (1–24) until the preview looks right.
- Set a Shadow Color if you want something other than pure black. Note this only affects iOS — Android draws elevation shadows in its own system color and offers no way to tint them.
- Choose an Output Format and copy the code.
Need a shadow the preset scale can't hit? Switch Shadow Values to Custom values and set the offset, opacity, radius and elevation independently.
Where the preset numbers come from
The depth scale is Material Design's elevation scale, and each step maps to that elevation's penumbra shadow:
shadowOffset.heightis half the Material shadow's vertical offset (rounded down, minimum 1) — iOS shadows read as sitting lower than the CSS equivalent, so halving the offset lines the two up.shadowRadiusremaps the Material blur (1–38) onto iOS's much tighter 1–16 radius range.shadowOpacityscales from 0.2 at depth 1 to 0.6 at depth 24, so a deeper shadow gets darker as well as larger.elevationis the depth value, passed straight through.
This is the same mapping the widely-used community React Native shadow generator produces, so the values will match what you've likely already got elsewhere in your codebase.
Output formats
- StyleSheet.create — a ready-to-paste
StyleSheetblock, the usual shape in a React Native component file. - Plain style object — just the properties, for spreading into an existing style or a theme file.
- boxShadow (RN 0.76+) — React Native 0.76 added a CSS-style
boxShadowprop on the New Architecture that works on both platforms at once. If your app is on 0.76 or newer, this is the shorter option.
The Web Equivalent (HTML) output is the same shadow as a CSS box-shadow. That's what you need under react-native-web, which ignores elevation and the iOS shadow props entirely.
Why doesn't the shadow color change anything on Android?
It can't. Android's elevation shadow is drawn by the platform from the view's elevation and the system theme; there is no per-view shadow color before API 28, and React Native doesn't expose shadowColor to it. If you need a colored shadow on Android, either move to the boxShadow output on RN 0.76+, or fake it with a wrapping view.
Why is my shadow invisible on Android?
Android only draws an elevation shadow when the view has a solid background color. A transparent View with elevation: 8 renders nothing. Set backgroundColor on the same view as the elevation.
Related tools
For plain web work, the CSS Box Shadow Generator gives you spread, inset and full rgba control. To pick or tune the shadow color first, try the Color Picker.