buncha/code & dev/rn-shadow

React Native Shadow Generator

React Native splits shadows across two platforms with two different APIs. iOS uses shadowColor / shadowOffset / shadowOpacity / shadowRadius. Android ignores all of those and renders elevation through its Material model instead. This tool lets you tune both together and previews each platform's approximate output side-by-side.

Preset

Offset X — 0

Offset Y — 4

Opacity — 0.18

Radius (iOS) — 6

Elevation (Android) — 4

Shadow colour

iOS approx

Card

Android approx

Card

React Native style

{
  // iOS shadow props
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.18,
  shadowRadius: 6,
  // Android — iOS props are ignored, only elevation matters here
  elevation: 4,
}

Wrap a View with this style. Note: Android requires the parent View to have a non-transparent background (set backgroundColor on the same View) for the elevation shadow to render at all. iOS does not.

Pure code generation — runs in your browser.

Pairs well with

Base64 Encoder / Decoder

UTF-8-safe Base64 encode and decode. Handles emoji…

Binary Converter

Convert text to binary and binary to text.

CSS Background Pattern Generator

Build tileable backgrounds with pure CSS gradients…

CSS Checkbox & Switch Generator

Pure-CSS checkbox and toggle-switch styles that ov…

About React Native Shadow Generator

Tune iOS shadow props and Android elevation together with side-by-side previews of each platform. Solves the silent "looks great on iPhone, flat on Pixel" gotcha by surfacing both platforms at once.

Everything happens on your device. Close the tab and it's gone.