React Native Shadow Generator — iOS + Android, Free
Generate cross-platform React Native shadow code. Handles iOS shadow* and Android elevation. Visual preview included.
About React Native Shadow Generator
React Native shadows are notoriously inconsistent across platforms. iOS uses shadowColor / shadowOffset / shadowOpacity / shadowRadius. Android uses elevation alone — colour and offset are ignored. The ZTools React Native Shadow Generator builds both sides at once: pick a shadow visually, get a style object that produces a similar appearance on iOS and Android. Compatible with React Native 0.70+ and the new boxShadow API in 0.76+.
Use cases
- Add a card-style shadow to a component. Designer specs an iOS shadow. You need it on Android too. Generator gives both blocks tested for visual parity.
- Match a mockup from Figma. Figma uses CSS-style box-shadow. Generator translates Figma values to RN equivalents, accounting for different scales.
- Migrate from elevation-only to cross-platform. Older code uses elevation: 4. Looks fine on Android, missing on iOS. Generator emits the matching shadow* props.
- Use the new boxShadow API (RN 0.76+). Modern RN supports CSS-syntax boxShadow. Generator emits both old (shadow*) and new (boxShadow) for backwards compatibility.
How it works
- Pick visual values. Sliders for offset X, offset Y, blur, spread, opacity. Colour picker. Live preview shows the shadow on a sample card.
- Set elevation level. Android elevation 0-24. Generator suggests an elevation that visually matches the iOS shadow you picked.
- Pick output style. Object literal (StyleSheet.create), inline style, or boxShadow string (RN 0.76+).
- Copy code. TypeScript-ready style object. Drop into your component.
Examples
Input: Card shadow: offset (0, 2), blur 8, opacity 0.15, color #000
Output: { shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 4 }
Input: Same as boxShadow string
Output: boxShadow: "0px 2px 8px rgba(0,0,0,0.15)" (RN 0.76+ only)
Input: Elevated FAB style: large soft shadow
Output: { shadowColor:"#000", shadowOffset:{width:0,height:6}, shadowOpacity:0.25, shadowRadius:16, elevation:12 }
Frequently asked questions
Why is the Android shadow always grey?
Android elevation uses the OS's ambient + key shadow rendering — no colour control. To get a coloured shadow on Android, you have to use a custom view with native code.
Why doesn't my iOS shadow appear?
iOS shadows require backgroundColor on the view (or shadowOpacity > 0). Transparent backgrounds clip the shadow.
Should I use boxShadow or shadow*?
boxShadow (RN 0.76+) is the future. Use it on new projects. shadow* still works everywhere; mix both for compatibility while you migrate.
How do I match Figma shadows exactly?
You can't exactly — RN shadow rendering differs from CSS. Generator gives a "best fit" with visible preview so you can eyeball parity.
Privacy?
All generation in browser.
Pro tips
- Always set backgroundColor on shadowed views — without it, iOS shadows clip and disappear.
- For Android, elevation 4 is the standard "card lift"; elevation 8+ for FABs and elevated dialogs.
- Test on both platforms — a shadow that looks right on iOS often looks too heavy on Android (and vice versa).
- On Android, a coloured shadow requires a third-party library (react-native-shadow-2) or a wrapper view — native elevation has no colour API.
Reviewed by Ahsan Mahmood · Last updated 2026-05-06 · Part of ZTools.
For the full,
formatted version of this page, please enable JavaScript and reload
https://ztools.zaions.com/react-native-shadow-generator.