React Native has no CSS box-shadow. iOS reads a separate shadowColor, shadowOffset, shadowOpacity, and shadowRadius, while Android ignores all of those and works from a single elevation number instead, so one visual shadow needs two different sets of values before it looks right on both platforms.
Sliders for offset X/Y, opacity, radius, and elevation drive a live preview against a card mockup. Copy the result out as a ready StyleSheet.create() block with both platforms' properties already filled in.
Why elevation has its own slider
Elevation is not derived from the offset, opacity, or radius sliders. Android approximates shadow depth from that one number alone, independent of the other values. Hence the separate control. Getting Android to visually match iOS means tuning elevation by eye, and no formula will do it for you.
What the preview does and doesn't tell you
The preview card renders a CSS box-shadow built from the same offset, opacity, radius and color values, as a quick approximation you can judge in the browser. It stands in for the result without being a validated render of either platform's shadow engine, so treat it as a starting point and confirm the final look in a simulator or on-device.
Frequently asked questions
Will the same shadow look identical on iOS and Android?
Not exactly. iOS renders the shadow properties directly, while Android has only the elevation number with which to approximate the same depth. Those two rendering paths guarantee no pixel match, so adjust elevation by eye against the iOS result instead of assuming a formula connects them.
Can I use negative offset values?
They're supported. Offset X and Y both range down to -25px, which shifts the shadow up or to the left of the element instead of down and to the right.
Related Utilities You Might Need
CSS Glassmorphism
Create and customize gorgeous glassmorphism UI cards with dynamic shadows, blur, and live CSS code export.
Image Cropper
Crop unwanted parts of images and download desired parts as high-quality cropped assets.
Image Filters
Apply custom filters, adjustments, brightness, contrast, and grayscales to your images.