Handitab

React Native Shadow Generator

Generate React Native shadow styles for iOS (shadowColor, shadowOffset, shadowOpacity, shadowRadius) and the Android elevation value.

About React Native Shadow Generator

React Native draws shadows differently on each platform. iOS uses four style properties: shadowColor, shadowOffset, shadowOpacity, and shadowRadius. Android ignores those and uses a single elevation number that the system turns into a shadow. This generator outputs one style object with both sets. The web preview is an approximation built with CSS box-shadow from the iOS values, so the Android result on a device will look different.

How to use React Native Shadow Generator

  1. Fill in "Shadow color", "Offset width", "Offset height" and "Opacity", and the other options.
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about React Native Shadow Generator

Why does my shadow not appear on Android?

Android needs the elevation property and a background color on the same view. A transparent view casts no shadow. On Android 9 and later, shadowColor also tints the elevation shadow, but offset, opacity, and radius are ignored.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
REM to PXConvert rem units to pixels by multiplying by the root font size (16px by default), with em, pt, percent, and vw results as well.RGB to HEXConvert an RGB color such as rgb(5, 150, 105) to its six-digit HEX code, with the matching HSL value shown alongside the result.RGBA to HEX ConverterConvert an RGBA color with an alpha value to an eight-digit HEX code, where the last two digits carry the transparency.VW to PXConvert vw units to pixels for a viewport width you set (1440px by default), where 1vw equals one percent of the viewport width.Aspect Ratio CalculatorCalculate the aspect ratio from a width and height, then find the matching height for a new width so the image keeps its proportions.Border Radius GeneratorGenerate a CSS border-radius by setting each of the four corners in pixels with a live preview, then copy the finished declaration.