React Native Shadow Generator

Build a shadow visually and copy it as ready-to-use React Native shadow and elevation style props.

Offset X (0px)

Offset Y (8px)

Blur (24px)

Spread (0px)

Colour

Opacity (18%)

Preview

Code

{
  shadowColor: "#15171c",
  shadowOffset: { width: 0, height: 8 },
  shadowOpacity: 0.18,
  shadowRadius: 12,
  elevation: 12, // Android
}

Ad space — always below the tool, never inside it

How to use react native shadow generator

1Adjust the slidersSet offset, blur, spread, colour and opacity.

2Preview on light or darkSwitch the preview background to check how it looks either way.

3Copy the style objectCopy the shadow and elevation props straight into your StyleSheet.

The shadow* properties only work on iOS — Android needs elevation for a similar effect, so this tool generates both.

Close, but not pixel-identical — elevation is Android's own approximation and doesn't map 1:1 to iOS's shadow properties.