Skip to content
🌗

React Native Shadow Generator

Free React Native shadow generator. Tweak offset, blur, opacity and color with a live preview and copy ready-to-paste shadow styles for iOS (shadowOffset, shadowRadius) and Android (elevation), plus the new boxShadow syntax.

Preview card
StyleSheet (iOS + Android)
const styles = StyleSheet.create({
  card: {
    // iOS
    shadowColor: "#000000",
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.25,
    shadowRadius: 8,
    // Android
    elevation: 12,
  },
});
boxShadow
// React Native 0.76+ (New Architecture)
boxShadow: "0px 6px 16px rgba(0, 0, 0, 0.25)"

How to use it

  1. 1Drag the sliders to set the shadow offset, radius and opacity.
  2. 2Pick a shadow color and a preview background that matches your screen.
  3. 3Copy the StyleSheet code for iOS + Android, or the boxShadow string for React Native 0.76+.

About this tool

Shadows in React Native behave differently on each platform. iOS uses shadowColor, shadowOffset, shadowOpacity and shadowRadius, while Android relies on a single elevation value. This generator outputs both so your cards look consistent everywhere.

If you're on React Native 0.76 or newer with the New Architecture, you can use the CSS-like boxShadow property instead. The tool generates that too.

Built by Biju Dey, a React Native developer. Need help with your app? Let's talk.

More free tools