Generator Tools

React Native Shadow Generator

Visually build a React Native shadow and copy the StyleSheet for iOS shadow props, Android elevation, the new 0.76+ boxShadow string, and CSS. Live preview.

Presets

Shadow

Offset X (width)

Offset Y (height)

Blur (shadowRadius)

Spread (boxShadow only)

Opacity

Color

Preview options

Shape

Background

Live preview

elevation 4

Web

Real CSS box-shadow (spread included)

iOS

shadow* props, no spread support

Android

elevation 4 approximation

The iOS and Android tiles approximate how each platform renders the shadow. iOS ignores spread, and Android draws a Material elevation shadow that does not honor the offset or color the way iOS does.

StyleSheet (cross-platform baseline)

Works on every React Native version. iOS uses the shadow* props, Android uses elevation.

const styles = StyleSheet.create({
  shadow: {
    shadowColor: "#000000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 4,
  },
});

Platform.select

Sends each platform only the props it reads. Import Platform from react-native.

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: {
        shadowColor: "#000000",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.15,
        shadowRadius: 8,
      },
      android: {
        elevation: 4,
        shadowColor: "#000000",
      },
    }),
  },
});

boxShadow string (React Native 0.76+)

New Architecture box-shadow style. Supports spread and matches CSS on both platforms.

// React Native 0.76+ (New Architecture) supports a CSS-like boxShadow string.
const styles = StyleSheet.create({
  shadow: {
    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
  },
});

CSS box-shadow (web / React Native Web)

The equivalent CSS declaration for web targets and Expo web.

box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);

How to use

Pick a preset (Card, Button, Floating, Subtle, Glow, or Deep) or start from the default card shadow.
Adjust the offset X and Y, blur, spread, opacity, and color while the iOS and Android previews update instantly.
Check the previews and the derived Android elevation value to confirm the shadow reads well on both platforms.
Copy the cross-platform StyleSheet, the Platform.select version, the React Native 0.76+ boxShadow string, or the CSS, whichever your project needs.
Paste the style into your component and apply it with the style prop.

About this tool

React Native Shadow Generator builds a mobile shadow visually and gives you copy-ready code for every way React Native draws shadows, because React Native does not use CSS box-shadow on older versions and each platform handles shadows differently. You set the offset, blur, spread, opacity, and color with sliders, and the tool renders three side-by-side previews: a real web box-shadow, an iOS approximation, and an Android elevation approximation, so you can see the platform differences before you ship. The output covers four cases. The first is a StyleSheet.create block using the iOS shadow props (shadowColor, shadowOffset, shadowOpacity, shadowRadius) plus an Android elevation value, the cross-platform baseline that renders on every React Native version. The second writes the same style with Platform.select so iOS and Android each receive only the props they actually read, which keeps the style object clean and avoids confusion about why a prop appears to do nothing on one platform. The third is the boxShadow string style added in React Native 0.76 and the New Architecture, a CSS-like value that finally supports spread and matches across iOS and Android. The fourth is the equivalent CSS box-shadow for web targets and React Native Web or Expo web. The platform divergence is the whole reason this tool exists. iOS reads the shadow props and ignores spread entirely. Android, before the boxShadow style, ignores the iOS shadow props and draws a Material elevation shadow from a single elevation number that does not honor your offset or color, so the tool derives an elevation value that approximates the visual lift of your blur and offset and warns you when a non-zero spread cannot be reproduced by the legacy props. Everything runs locally in your browser. Your colors and numbers are never uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

React Native Shadow Generator

How to use

About this tool

You may also like

CSS Box Shadow Generator

CSS Text Shadow Generator

Image Drop Shadow Generator

CSS Filter Generator

HEX to RGB Converter

Color Format Converter

React Native Shadow Generator