React Native Shadow Generator - iOS & Android Shadow Styles Online
Generate cross-platform shadow styles for React Native with live dual-platform preview. Supports iOS shadowProps, Android elevation, and boxShadow (RN 0.76+) — 100% client-side.
Adjust a single slider to auto-calculate all shadow properties based on Material Design elevation
Calculated Values
Shadow Presets
Preview Settings
Preview
iOS
Android
Generated Code
const styles = StyleSheet.create({
shadow: {
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.27,
shadowRadius: 3,
elevation: 4,
},
});Frequently Asked Questions
What is the React Native Shadow Generator?
The React Native Shadow Generator is an online tool that creates platform-specific shadow styles for React Native applications. Since React Native uses different shadow APIs for iOS (shadowColor, shadowOffset, shadowOpacity, shadowRadius) and Android (elevation), this tool generates the correct properties for both platforms with a visual preview, so you can see exactly how your shadows will look on each device.
How do I use this tool?
Choose between Quick Mode (single depth slider) or Advanced Mode (individual property controls). Adjust the shadow parameters using sliders or number inputs. Optionally pick a shadow color other than the default black. Preview the shadow in real-time on both iOS and Android mockups. Select your preferred code format (StyleSheet, Inline, Platform.select, or boxShadow) and click Copy to paste the generated code into your React Native project.
Is my data secure? Does it leave my browser?
Yes. This tool runs entirely in your browser using client-side JavaScript. No shadow configurations, code outputs, or any data is sent to any server. Your work stays completely on your device.
Why do shadows look different on iOS and Android in React Native?
React Native uses fundamentally different shadow rendering engines per platform. iOS uses Core Animation shadow properties (shadowColor, shadowOffset, shadowOpacity, shadowRadius) which map directly to CALayer. Android uses the Material Design elevation property, which creates a predefined shadow based on a single numeric depth value. This means pixel-perfect shadow matching across platforms is inherently limited, but this tool helps you get as close as possible.
What is the boxShadow prop in React Native 0.76+?
Starting with React Native 0.76, the New Architecture introduced boxShadow as a web-spec-compliant shadow property that works on both iOS and Android. It uses the same syntax as CSS box-shadow, making it familiar for web developers. This tool can generate boxShadow output for projects using React Native 0.76 or later with the New Architecture enabled.
What is the difference between elevation and iOS shadow props?
elevation is Android-only and accepts a single number (0-24) representing Material Design elevation. It automatically determines shadow appearance, including offset, blur, and opacity. iOS shadow props give you granular control: shadowColor sets the color, shadowOffset controls direction, shadowOpacity controls transparency, and shadowRadius controls blur. You typically need to set both to achieve cross-platform shadows.
How do I choose the right shadow depth?
Follow Material Design elevation guidelines as a reference: 0-2 for resting cards and list items, 3-6 for raised buttons, snackbars, and FABs, 8-12 for modals, bottom sheets, and menus, and 16-24 for navigation drawers and side sheets. Use the presets in Quick Mode for common shadow depths.
Code Examples
// React Native shadow style generator
function generateShadowStyle(depth, color = '#000000') {
const shadowOpacity = 0.2 + (depth / 24) * 0.4;
const shadowRadius = Math.max(1, Math.round(depth * 0.8));
const shadowOffsetHeight = Math.max(1, Math.round(depth * 0.5));
return {
shadowColor: color,
shadowOffset: {
width: 0,
height: shadowOffsetHeight,
},
shadowOpacity: Math.round(shadowOpacity * 100) / 100,
shadowRadius: shadowRadius,
elevation: depth,
};
}
// Platform-specific shadow
import { Platform } from 'react-native';
function createPlatformShadow(depth, color = '#000000') {
const shadow = generateShadowStyle(depth, color);
return Platform.select({
ios: {
shadowColor: shadow.shadowColor,
shadowOffset: shadow.shadowOffset,
shadowOpacity: shadow.shadowOpacity,
shadowRadius: shadow.shadowRadius,
},
android: {
elevation: shadow.elevation,
shadowColor: shadow.shadowColor,
},
});
}
// Usage
const cardShadow = generateShadowStyle(4);
console.log(cardShadow);
// { shadowColor: '#000000', shadowOffset: { width: 0, height: 2 },
// shadowOpacity: 0.27, shadowRadius: 3, elevation: 4 }