MakerBox

React Native Shadow Generator

Visually design a React Native shadow and copy the style object — iOS shadow* props plus Android elevation — 100% in your browser, no upload

React Native shadow generator

Design a shadow visually and copy a ready-to-paste React Native style object — iOS shadow* props plus Android elevation.

#000000

React Native style object

{
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.25,
  shadowRadius: 4,
  elevation: 5,
}

The preview uses CSS box-shadow, which React Native cannot consume. Copy the style object above: iOS reads shadowColor / shadowOffset / shadowOpacity / shadowRadius, Android draws its shadow from elevation.

🔒 Runs in your browser — nothing is uploaded.

Design React Native shadows visually

Drag the sliders for opacity, radius, offset and elevation, pick a colour, and copy a ready-to-paste React Native style object. The live box mirrors the shadow using an approximate CSS box-shadow so you can see the result before pasting it into your app.

Why not just use box-shadow?

React Native does not understand the CSS box-shadow property. iOS renders shadows from shadowColor, shadowOffset, shadowOpacity and shadowRadius, while Android draws its own shadow from the elevation value. This tool outputs all of them together so one style works on both platforms.

Frequently asked questions

Why are there iOS props and an Android elevation?

iOS reads the shadowColor, shadowOffset, shadowOpacity and shadowRadius props, but Android ignores them and renders a shadow from the elevation value instead, so both are included.

Is the preview exact?

The preview approximates the iOS shadow with CSS box-shadow. On-device rendering, especially Android elevation, can differ slightly, so treat it as a close guide.