AlteredIdea: Just Another Thought
JSON to TypeScriptJSON to Go StructCSS to React NativeRN Shadow GeneratorRN Flexbox PlaygroundJSON to KotlinJSON to SwiftKotlin FormatterSwift Formatter

RN Shadow Generator

Configure React Native shadow properties with live preview and generated code.

iOS Shadow

shadowColor
shadowOffset.width0
shadowOffset.height4
shadowOpacity0.25
shadowRadius4

Android Shadow

elevation4

Preview Style

Background
borderRadius8
Preview
iOS (StyleSheet)
const styles = StyleSheet.create({
  shadow: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
  },
});
Android (StyleSheet)
const styles = StyleSheet.create({
  shadow: {
    elevation: 4,
  },
});
Combined (Platform.select)
const shadowStyle = Platform.select({
  ios: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
  },
  android: {
    elevation: 4,
  },
});

React Native shadows: why iOS and Android need different code

One of the most confusing aspects of React Native styling for CSS developers is that shadows require completely different properties on iOS and Android. On iOS, shadows are a feature of the native CALayer rendering system and require four separate properties: shadowColor, shadowOffset, shadowOpacity, and shadowRadius. On Android, shadows are handled through the Material Design elevation model and are controlled by a single elevation number.

The two systems are not interchangeable and do not produce visually identical results even with equivalent settings. This means every shadow in a cross-platform React Native app effectively requires two implementations wrapped in Platform.select(). This generator shows both outputs side by side so you can tune them independently while seeing the visual result, then copies the combined Platform.select() pattern that cleanly handles both platforms in one StyleSheet.

How to generate React Native shadows: step by step

  1. 1
    Pick a shadow preset
    Click one of the presets (None, Subtle, Small, Medium, Large, Heavy) to start from a sensible baseline instead of configuring every slider from zero.
  2. 2
    Adjust the iOS shadow sliders
    Tune shadowColor (pick a color and type the hex), shadowOffset width and height (negative values cast shadow upward/left), shadowOpacity (0–1), and shadowRadius (blur spread).
  3. 3
    Set the Android elevation
    Drag the elevation slider (0–24). Higher elevation adds a larger, softer shadow on Android. The preview simulates how this looks using a CSS box-shadow approximation.
  4. 4
    Customize the preview card
    Change the preview card's background color and border radius to match your actual component style. This gives you a realistic context for the shadow you are designing.
  5. 5
    Copy the generated code
    Three code blocks appear: iOS-only StyleSheet, Android-only StyleSheet, and a combined Platform.select() block. Copy whichever matches your cross-platform strategy.

Related Tools

📘

JSON to TypeScript

Convert JSON objects into TypeScript interfaces or type aliases. RN-friendly types, optional fields, readonly, and multiple export styles.

🐹

JSON to Go Struct

Generate Go structs from JSON with json tags, omitempty, pointer types for nullables, and proper PascalCase field name conversion.

📱

CSS to React Native

Convert CSS rules to React Native StyleSheet objects. Handles shorthand expansion, property mapping, and flags unsupported properties.

📐

RN Flexbox Playground

Interactively explore React Native flexbox. Tweak direction, wrap, alignment, and item properties: see live code output.

Frequently Asked Questions

Why are iOS and Android shadow properties different in React Native?
iOS uses the native UIView shadow system (shadowColor, shadowOffset, shadowOpacity, shadowRadius), while Android uses the Material Design elevation model (a single elevation number). They are fundamentally different rendering systems with no one-to-one mapping.
What does elevation do on Android?
Elevation is Android's way of expressing depth in Material Design. A higher elevation value produces a larger, softer shadow cast downward. The exact appearance depends on the device's Android version and Material Design implementation.
Why doesn't elevation work on iOS?
elevation is an Android-only property. On iOS it is silently ignored. You must use the shadow* properties for iOS shadows. That is why Platform.select() is the recommended cross-platform approach.
What is the recommended way to apply shadows cross-platform?
Use Platform.select({ ios: { shadowColor, shadowOffset, shadowOpacity, shadowRadius }, android: { elevation } }) inside StyleSheet.create. The combined code block the tool generates implements exactly this pattern.
Do shadow properties require a background color on iOS?
Yes. On iOS, shadow properties only render if the component has a non-transparent background color. If your component has no background, the shadow will not appear even with all shadow properties set.
What values are typical for a subtle card shadow?
A common card shadow on iOS: shadowColor '#000', shadowOffset { width: 0, height: 2 }, shadowOpacity 0.1, shadowRadius 4. On Android: elevation 2. This produces a very light lift effect.
Can I use negative shadowOffset values?
Yes. A negative height value casts the shadow upward (useful for bottom-anchored modals). A negative width value casts it to the left. Both work on iOS.
Is this tool free?
Completely free. No account, no install. The tool runs entirely in your browser.

AlteredIdea vs alternatives

vs other online tools: Everything runs in your browser: private, instant, no account needed.

vs desktop apps: No install required. Works on any device.

vs paid tools: Completely free, unlimited use.

Share:Share on XShare on LinkedIn