React Native Shadow Generator
Design a React Native shadow combining iOS's shadowColor/Offset/Opacity/Radius with Android's elevation in one style object.
React Native shadow generator
Design a shadow visually and copy a ready-to-paste React Native style object — iOS shadow* props plus Android elevation.
iOS, and Android from API 28; below that Android draws the shadow black.
Each platform reads its own props and ignores the rest.
React Native style object
{
shadowColor: '#000000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
}Result: 7 lines, 128 charactersThe preview uses CSS box-shadow, which React Native reads only as boxShadow, from 0.76 on the New Architecture. Copy the style object above: iOS reads shadowColor / shadowOffset / shadowOpacity / shadowRadius, Android draws its shadow from elevation.
The Android card is Material's shadow for that elevation, which is what Android draws: it ignores shadowOffset, shadowOpacity and shadowRadius, and uses shadowColor only from API 28 — below that the shadow is black.
Design React Native shadows visually
Drag the sliders for opacity, radius, offset and elevation, pick a colour, and copy a ready-to-paste React Native style object. The live box mirrors the shadow using an approximate CSS box-shadow so you can see the result before pasting it into your app.
Why not just use box-shadow?
Before React Native 0.76 there is no box-shadow at all, and its boxShadow style still works only on the New Architecture. iOS renders shadows from shadowColor, shadowOffset, shadowOpacity and shadowRadius, while Android draws its own shadow from the elevation value. This tool outputs all of them together so one style works on both platforms. A Target row writes the object for iOS and Android together, iOS alone, Android alone (shadowColor and elevation), or a single boxShadow string for the New Architecture of React Native 0.76 and later, and the preview cards follow it.
Frequently asked questions
Why are there iOS props and an Android elevation?
iOS reads the shadowColor, shadowOffset, shadowOpacity and shadowRadius props, but Android ignores them and renders a shadow from the elevation value instead, so both are included. Android uses shadowColor only from API 28; below that its shadow is black. Elevation also changes which overlapping view is drawn on top.
Is the preview exact?
The preview approximates the iOS shadow with CSS box-shadow. On-device rendering, especially Android elevation, can differ slightly, so treat it as a close guide.
How does the shadow look on Android?
An Android card sits beside the iOS one, drawn from Material's elevation shadows, and a Depth slider sets the iOS shadow properties and Android's elevation together so the two platforms match.
Can I write only the props one platform reads, or use boxShadow?
Yes. The Target row writes iOS alone (the four shadow props, no elevation), Android alone (shadowColor and elevation; iOS draws nothing from those, since its shadowOpacity is 0 unless set), or one boxShadow string. boxShadow needs React Native 0.76 or later on the New Architecture, and on Android outset shadows need Android 9 or later. It is the same shadow the iOS card shows, with the radius as the blur.