React Native Shadow Generator
Tune shadow color, offset, opacity, radius, and Android elevation, then copy a ready-to-paste style object.
About the React Native Shadow Generator
Move the sliders and it builds out a full shadowColor / shadowOffset / shadowOpacity / shadowRadius / elevation object you can paste straight into a StyleSheet.create({...}) block. The live preview is rendered with CSS box-shadow as a stand-in, since iOS and Android draw native shadows a bit differently from the web, so treat what you see as a close guide rather than an exact match.
Why the output includes two completely separate sets of properties
This is the single most important thing to understand about React Native shadows: iOS and Android don't share a shadow API at all. iOS reads shadowColor, shadowOffset, shadowOpacity, and shadowRadius, mirroring the native iOS CALayer shadow properties, and completely ignores elevation. Android does the exact opposite, it reads only the single elevation property, a Material Design concept representing how "raised" a surface appears, and ignores every one of the shadow-prefixed properties entirely. That's exactly why this tool generates both sets together in one object, it's not redundant, each platform simply reads whichever half of the object actually applies to it and silently disregards the rest, so the same style object produces a correct shadow on both platforms without any conditional logic in your code.
A real limitation: the Shadow Color slider doesn't affect Android
Because Android's native shadow rendering comes entirely from the elevation property, and elevation-based shadows render using the operating system's own fixed shadow color rather than anything you specify, dragging the Shadow Color slider changes what your iOS shadow looks like, but has no effect on the actual shadow Android renders. This is a genuine platform constraint in React Native itself, not a limitation of this generator, if you need a custom-colored shadow specifically on Android, you'd need a different approach entirely (like a background image or a third-party shadow library), elevation alone won't give you color control there.
Why the web preview can only approximate the real result
CSS box-shadow's blur radius and iOS's shadowRadius are conceptually similar but not calculated identically, so the same numeric value won't necessarily produce visually matching softness between a web preview and a real iOS shadow. Android's elevation is even further from any direct CSS equivalent, it's a Material Design abstraction that bakes in a specific shadow gradient and appearance the platform calculates internally, with nothing in CSS that maps to it one-to-one. The live preview here is genuinely useful for getting a rough sense of direction, softness, and color before you commit to values, but the only way to see the true final result is testing on an actual iOS and Android device or simulator.
Why the copied code is bare properties, not a full style object
The output intentionally doesn't wrap itself in StyleSheet.create({...}) or a named style key, it's just the five property lines meant to be pasted directly inside whatever existing style object you're already building. That keeps it flexible, you can drop these lines into a brand new style, merge them into a card component's existing styles, or combine them with other properties like backgroundColor and borderRadius without needing to restructure anything the generator hands you.
Why the elevation range tops out at 24
Android's Material Design elevation system is conventionally used in a fairly narrow practical range, small values like 2-4 for subtle card separation, higher values like 8-16 for floating action buttons or dialogs, and the highest values reserved for modals and navigation drawers that need to visually sit clearly above everything else on screen. Values much beyond that upper range produce a shadow so pronounced it rarely looks intentional in a real interface, which is why the slider here caps at 24, comfortably covering the entire practical design range Android's own guidelines describe without inviting values that would look obviously excessive in a shipped app.
Frequently Asked Questions
Why does the generated style object include both shadow properties and elevation?
iOS and Android use completely different shadow systems. iOS reads shadowColor, shadowOffset, shadowOpacity, and shadowRadius while ignoring elevation entirely; Android reads only elevation and ignores the shadow-prefixed properties. Including both means the same style object produces a correct shadow on either platform automatically.
Will changing the Shadow Color slider affect my app's shadow on Android?
No, Android's elevation-based shadows render using the operating system's own fixed shadow color, not a value you can set. The color slider only affects the iOS shadowColor property; Android shadow color requires a different approach entirely, elevation alone doesn't support it.
Why doesn't the web preview look identical to the shadow on a real device?
CSS box-shadow's blur calculation isn't identical to iOS's shadowRadius, and Android's elevation is a Material Design abstraction with no direct CSS equivalent at all. The preview is a useful rough guide for direction and softness, but only testing on an actual device shows the true final result.
Why doesn't the copied code include StyleSheet.create()?
The output is intentionally just the bare property lines, meant to be pasted directly inside whatever style object you're already building, rather than a complete standalone style block. This makes it easy to merge into an existing component's styles alongside other properties.
Can I get a custom-colored shadow on Android using elevation?
Not directly, elevation-based Android shadows always use the system's default shadow appearance regardless of what color you specify elsewhere. Custom shadow colors on Android typically require an alternative technique outside the standard elevation property.
What does shadowOpacity control separately from shadowColor?
shadowOpacity is a distinct 0-1 value that controls the overall transparency of the iOS shadow, independent of the color itself. Since the color picker here only supplies a plain opaque hex value, shadowOpacity is effectively the sole opacity control for the generated iOS shadow.