Why doesn't box-shadow work in React Native?

React Native does not implement CSS. iOS exposes Core Animation's shadow properties — colour, offset, opacity and radius — while Android exposes a single elevation value that drives Material Design's shadow renderer. They are different systems.

How do I match an iOS shadow on Android?

You approximate it. Elevation chooses the colour, offset and blur for you according to Material Design, so you pick the value that looks closest rather than converting. This tool shows both side by side so you can judge.

Why is my shadow not showing on iOS?

Two usual causes: the view has no background colour, in which case iOS has no shape to cast from, or overflow is set to hidden, which clips the shadow away entirely.

Does elevation affect anything besides the shadow on Android?

Yes — it also controls z-ordering. A higher elevation draws above lower ones regardless of position in the tree, which can surprise you when raising a shadow unexpectedly brings a view in front of its siblings.

Can I use the same values on web?

The CSS box-shadow equivalent is generated alongside, so a React Native Web target can use it directly. It will be close to the iOS rendering, since both blur similarly.

React Native Shadow Generator

Generate matching iOS and Android shadow styles for React Native, with a preview.

DeveloperRuns in your browserFree, no signup

About the React Native Shadow Generator

React Native does not share CSS's box-shadow. iOS uses shadowColor, shadowOffset, shadowOpacity and shadowRadius, which map onto Core Animation's shadow properties; Android uses a single elevation number that drives Material Design's own shadow rendering. There is no way to express one exactly in terms of the other.

That is why this outputs both, plus the CSS equivalent for a web target. An elevation value produces a shadow whose colour, offset and blur are chosen by the platform, so matching an iOS shadow on Android means picking the elevation that looks closest rather than converting a value.

One iOS gotcha worth knowing: shadows are not drawn on a view with no background colour, and setting overflow hidden removes them entirely. If a shadow refuses to appear, those two are almost always the reason.

How it works

Drag the sliders, or start from a preset, and watch the preview update.
Android's elevation and iOS's four shadow props are kept in sync — change either and the other follows.
Copy the StyleSheet, choosing the legacy cross-platform props or the newer boxShadow.

Frequently asked questions

Why doesn't box-shadow work in React Native?: React Native does not implement CSS. iOS exposes Core Animation's shadow properties — colour, offset, opacity and radius — while Android exposes a single elevation value that drives Material Design's shadow renderer. They are different systems.
How do I match an iOS shadow on Android?: You approximate it. Elevation chooses the colour, offset and blur for you according to Material Design, so you pick the value that looks closest rather than converting. This tool shows both side by side so you can judge.
Why is my shadow not showing on iOS?: Two usual causes: the view has no background colour, in which case iOS has no shape to cast from, or overflow is set to hidden, which clips the shadow away entirely.
Does elevation affect anything besides the shadow on Android?: Yes — it also controls z-ordering. A higher elevation draws above lower ones regardless of position in the tree, which can surprise you when raising a shadow unexpectedly brings a view in front of its siblings.
Can I use the same values on web?: The CSS box-shadow equivalent is generated alongside, so a React Native Web target can use it directly. It will be close to the iOS rendering, since both blur similarly.

Privacy

Everything happens locally. Your files are read by your own browser, processed on your device, and never uploaded — closing the tab is all it takes to erase them.

Related Developer tools

JSON Formatter

Format, validate and minify JSON with clear error positions.

Base64 Encode / Decode

Convert text and files to Base64 and back, with URL-safe output.

URL Encode / Decode

Percent-encode and decode URLs, query strings and path segments.

HTML Formatter

Beautify or minify HTML with consistent indentation.