apple-ux-guide
Comparison of the Shadow blur/radius property across platforms
The shadow blur-radius property on Web, shadowRadius property on Apple platforms (iOS/macOS), and elevation property on Android all affect how blurred out the edges of a shadow look. However, they each affect the resulting shadow differently, and setting the same value for each of these will not result in a shadow that looks the same across platforms.
Convention
If you are working with shadowRadius on an Apple platform trying to align with designs made with a web tool (like Figma or Sketch), divide the blur by 2. This applies to React Native as well. This applies to these platforms on React Native as well (React Native, React Native macOS, and React Native Web)
Rationale
We compared how shadows are rendered across different platforms, and found a discrepancy in how blur is handled. For whatever reason, dividing the blur by 2 is necessary to have the correct effect on Apple platforms. See the table below:
| Platform + Notes | Code | Screenshot |
|---|---|---|
| Web: CSS </br></br> box-shadow documentation, also can try out shadows here |  |
Shadow blur = 100  |
| Web: Figma </br></br> Figma uses the same shadow blur property as web |  |
 |
| Web: React Native Web </br></br> React Native shadowRadius documentation here, CSS shadow blur documentation here, also can test shadows with this snack. Uses shadowRadius, which ends up being the same as the blur property (don’t need to /2) |  |
 |
| Apple: React Native iOS </br></br> React Native shadowRadius documentation here, native Apple shadowRadius documentation here, also can test shadows with this snack. In order to get Apple shadows to look the same as Figma, shadowRadius should be blur/2. |   |
  |
| Apple: Native macOS </br></br> shadowBlurRadius documentation |   |
  |
| Android: React Native Android </br></br> Can test shadows with this snack. Uses elevation, which is just different from both how web/iOS handle shadows |  |
 |