CodeKitHubWhat Is This Tool?
In React Native, shadows are not cross-platform by default. iOS uses four separate style props (shadowColor, shadowOffset with width/height, shadowOpacity from 0-1, and shadowRadius for blur) which map to the same underlying CoreAnimation shadow the web's box-shadow uses. Android's native View system doesn't support arbitrary shadow shapes at all — it only supports elevation, a single number that produces a fixed Material Design drop-shadow based on how "high" the view appears to float.
This means a shadow that looks right on iOS using shadowRadius/shadowOpacity will show nothing at all on Android unless you also set elevation, and the two will never look pixel-identical since elevation's shadow shape isn't customizable the way iOS's is. As of React Native 0.74 with the New Architecture enabled, a cross-platform boxShadow style property is also available, using the same syntax as CSS.
Why Use It?
- See a live visual preview while you adjust offset, blur, opacity and color — instead of guessing values and rebuilding your app to check.
- Get iOS shadow props, Android elevation, and the newer cross-platform boxShadow string all at once, so you don't have to look up three different APIs.
- Elevation is a separate control (not auto-calculated from blur/opacity) because Android's elevation-to-shadow-appearance mapping isn't a direct translation from iOS's shadow properties — you're meant to tune it to visually match, which this tool lets you do side by side.
- Free, instant, and copy-ready as a single style object.
How to Use
- Adjust offset X/Y, blur radius, opacity and shadow color — the preview box updates live.
- Separately tune the Android elevation number until it visually matches your intended shadow strength.
- Click "Copy" to copy the full style object, including iOS props, Android elevation, and the boxShadow string.
- Paste the object into your component's StyleSheet — spread or merge it with your existing view styles.
Example
Input
Offset (0, 4), blur 8, opacity 0.25, black, elevation 5Output
shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'shadowRadius is set to half the blur value shown in the preview, matching how CSS blur radius relates to iOS's shadowRadius in practice.
Frequently Asked Questions
Why doesn't my shadow show up on Android?
The shadowColor/shadowOffset/shadowOpacity/shadowRadius props are iOS-only — Android's native rendering simply ignores them. You need to also set the elevation prop (a positive number) for a shadow to appear on Android at all.
Can I make the Android shadow look identical to the iOS one?
Not exactly — elevation produces Android's built-in Material Design shadow shape, which isn't independently configurable for color, offset direction or blur the way iOS's shadow is. You can tune the elevation number to get a visually similar strength, but pixel-perfect matching between platforms isn't possible with the classic shadow/elevation APIs.
What is the boxShadow prop and can I use it instead?
boxShadow is a newer, genuinely cross-platform style property (added in React Native 0.74, available on the New Architecture) that uses the same string syntax as CSS box-shadow and works identically on both iOS and Android. If your app's React Native version and architecture support it, you can use just this one property instead of the four separate iOS props plus elevation — check your RN version and New Architecture status before relying on it in production.
Why is shadowRadius half the blur value I set?
The live preview uses CSS box-shadow, where the blur value spreads roughly twice as far as iOS's shadowRadius does for the same number. The generated code sets shadowRadius to half your blur value so the shadow you see in the preview matches what iOS actually renders — if you copied the blur value straight across, the iOS shadow would look noticeably softer and larger than the preview.
Do I need Platform.select to apply these styles?
No — it's safe to put the iOS shadow* props and Android's elevation together in one style object, exactly as the generated code does: each platform simply ignores the other's props. Platform.select is only worth adding if you want genuinely different shadow designs per platform, not just to avoid warnings (there are none).
I set elevation but the Android shadow still doesn't appear — why?
The two most common causes: the view has no backgroundColor (Android's elevation shadow is cast from the view's opaque background, so a transparent view casts nothing), or a parent has overflow: 'hidden' and is clipping the shadow. Give the view a solid background color and check ancestor overflow settings before assuming the elevation value is wrong.