Tools Blog

React Native Shadow Generator

Scan to open this page

iOS preview

Android preview (approximate)

Android's native elevation shadow ignores shadowColor — it's always a fixed gray/black tone. A custom-colored shadow on Android needs a separate library.

Tune a shadow with live iOS and Android previews — Android's opacity falls off exponentially as elevation increases, not linearly like most generators assume — and copy Platform.select-wired StyleSheet.create code, ready to paste.

How it works

  1. Adjust offset, opacity, radius, color, and elevation — both previews update live
  2. Use "Auto-suggest elevation" to derive an Android elevation from your iOS opacity/radius using an exponential approximation, not a naive linear one
  3. Copy the generated code — already wired with Platform.select and StyleSheet.create

Frequently asked questions

Why don't the iOS and Android previews look identical?

iOS uses four separate properties (shadowColor/Offset/Opacity/Radius) while Android's Material Design elevation computes a shadow from a single number — they're different rendering systems, and this tool approximates Android's real behavior, where shadow opacity falls off exponentially as elevation increases, not linearly like many generators assume.

Why doesn't shadowColor affect the Android preview?

Android's native elevation shadow ignores shadowColor — it's always a fixed gray/black tone. A custom-colored shadow on Android requires a separate library.

Can I paste the output directly into my project?

Yes — it's already wired with StyleSheet.create and Platform.select, so no extra assembly is needed.

How is the suggested elevation calculated?

From your opacity and radius values, using an exponential curve — an approximation of how Android elevation actually behaves, not a precise reverse-engineering of Android's renderer.

#ReactNativeShadowGenerator#ReactNativeShadowIosAndroidDifferent#ReactNativeElevationVsShadow#Platform.selectShadowStyleCode#ReactNativeShadowColorNotWorkingAndroid

Related tools

HEX to RGBA Converter HEX to RGBA Converter Box Shadow Generator Box Shadow Generator

From the blog

Most React Native shadow generators fade Android's elevation in a straight line. Real Android doesn't.
dev

Most React Native shadow generators fade Android's elevation in a straight line. Real Android doesn't.

A developer wrote a whole post about fixing a shadow generator that used linear interpolation for Android elevation, when real elevation opacity falls off exponentially. We built that curve in from the start.

2026-08-30

Update history

  • 2026-08-30 Added: a cover image (two logo-free phone cards each casting a distinctly different shadow shape — a soft even oval vs. a layered stack of concentric rings — with a code bracket icon between them) — used as the card thumbnail, social share image, and blog title image.
  • 2026-08-30 Launched: live React Native shadow generator (no button) — live iOS/Android previews with an exponential elevation-opacity approximation, Platform.select-wired StyleSheet.create output, and an explicit note that Android's elevation shadow ignores shadowColor. Entirely client-side.