Why are iOS and Android shadows different?

They use completely different rendering systems. iOS uses Core Graphics with explicit offset/blur/opacity props. Android uses Material Design elevation, an integer that controls auto-generated shadows based on the view's shape and Material's lighting model.

Can I get perfectly-matching shadows on both platforms?

Not with native props alone. For pixel-perfect cross-platform shadows, render a custom SVG shadow or use a library like react-native-shadow-2. The trade-off is usually more code for a result that most users won't notice.

What's a reasonable elevation range?

1–4 for subtle shadows (menus, tooltips, inputs). 5–12 for cards. 12–24 for floating action buttons and modal dialogs. Avoid >24 — shadows get blown-out and lighting looks wrong.

Does this affect performance?

Shadows cost a little rendering overhead on both platforms. Elevation is cheaper on Android because it's drawn natively. For scrolling lists with hundreds of shadowed items, consider disabling shadows to keep 60fps.

What if I'm using React Native Web?

RN Web translates shadow props to CSS box-shadow, which works fine. Elevation is translated to a CSS shadow that approximates Material elevation. Use the iOS-style props for best cross-web consistency.

React Native Shadow Generator

Generate iOS shadow props and Android elevation side by side.

Code is generated in your browser.

iOS simulator preview

Approximates iOS shadow rendering

Android simulator preview

Approximates Material elevation

iOS StyleSheet

{
  shadowColor: "#000000",
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.25,
  shadowRadius: 4.0,
}

Android StyleSheet

{
  elevation: 4,
}

Combined (cross-platform)

shadow: {
  shadowColor: "#000000",
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.25,
  shadowRadius: 4.0,
  elevation: 4,
}

Similar tools

Base64 Encoder/Decoder

Encode and decode Base64 text and files, URL-safe variant included.

URL Encoder/Decoder

Percent-encode and decode URLs or just components.

HTML Encoder/Decoder

Escape and unescape HTML entities in any string.

What is a React Native Shadow Generator?

React Native uses two completely different shadow systems depending on platform. On iOS, you set four props (shadowColor, shadowOffset, shadowOpacity, shadowRadius) that map directly to Core Graphics' CGShadow. On Android, the shadow system is based on Material Design's elevation — a single integer that tells the system how "high" the view floats above its parent. These two APIs produce different visual results for the same input, and the platforms don't share props. A RN Shadow Generator lets you visually design the shadow and get both platforms' code at once.

The iOS shadow props map intuitively to web CSS: shadowOffsetis box-shadow's X/Y; shadowOpacity is the colour's alpha; shadowRadius is the blur amount (but scaled differently — RN's radius is roughly half of CSS's blur). Every prop is configurable and the visual result closely resembles a CSS box-shadow.

The Android elevation system is opinionated. Elevation is an integer typically between 1 and 24, where 1 is subtle (menus, inputs) and 24 is heavy (modal dialogs). Under the hood, Android derives the shadow shape from the elevation, the view's shape (including borderRadius), and ambient lighting assumptions. Developers don't get to pick blur, opacity, or offset independently. The trade-off: Android shadows feel native and consistent but can't match arbitrary CSS designs pixel-for-pixel.

This generator shows both platforms' output side-by-side and picks a sensible elevation from your iOS settings. It's not an exact match — that's impossible — but it gives both platforms matching visual weight, which is what most apps need.

Cross-platform tip. For consistent shadows across platforms, consider disabling native shadows and drawing them with an SVG or a semi-transparent background gradient. Libraries like react-native-drop-shadow and react-native-shadow-2 wrap this pattern. For pure performance, elevation-on-Android and shadow-props-on-iOS is what React Native's team recommends.

Privacy: nothing is uploaded. This is a code generator — it produces output from your settings locally and is ready to paste into your React Native StyleSheet.

How to generate React Native shadows

Adjust offset, blur, opacity, and colour in the sidebar.
Check both previews — iOS and Android render differently, and the previews approximate each.
Copy iOS, Android, or combined styles to your React Native StyleSheet.

Features

Simultaneous iOS and Android output — one config, two platforms.
Android elevation derived intelligently from iOS settings.
Side-by-side previews approximating each platform.
Combined cross-platform StyleSheet snippet.
Runs in your browser — no uploads.

Frequently asked questions

Why are iOS and Android shadows different?: They use completely different rendering systems. iOS uses Core Graphics with explicit offset/blur/opacity props. Android uses Material Design elevation, an integer that controls auto-generated shadows based on the view's shape and Material's lighting model.
Can I get perfectly-matching shadows on both platforms?: Not with native props alone. For pixel-perfect cross-platform shadows, render a custom SVG shadow or use a library like react-native-shadow-2. The trade-off is usually more code for a result that most users won't notice.
What's a reasonable elevation range?: 1–4 for subtle shadows (menus, tooltips, inputs). 5–12 for cards. 12–24 for floating action buttons and modal dialogs. Avoid >24 — shadows get blown-out and lighting looks wrong.
Does this affect performance?: Shadows cost a little rendering overhead on both platforms. Elevation is cheaper on Android because it's drawn natively. For scrolling lists with hundreds of shadowed items, consider disabling shadows to keep 60fps.
What if I'm using React Native Web?: RN Web translates shadow props to CSS box-shadow, which works fine. Elevation is translated to a CSS shadow that approximates Material elevation. Use the iOS-style props for best cross-web consistency.