React Native Shadow Generator

Design a React Native shadow for iOS and Android: copy the shadow props, elevation, boxShadow or a Platform.select snippet. Private.

PresetShadow colourCode

Opacity (%): 25Blur radius: 8Offset X: 0Offset Y: 4Elevation (suggested): 7

Preview (approximate)

iOS

Card

Android (elevation 7)

Card

Code

...Platform.select({
  ios: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 8,
  },
  android: {
    elevation: 7,
    shadowColor: '#000000',
  },
}),

Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)

Next steps

Done here? Use the Send to… menu on the result to carry it on to CSS to React Native.

Free React Native Shadow Generator for iOS and Android

Set the colour, blur, offset and opacity once and get the code for iOS, Android and the new boxShadow. Copy a ready Platform.select snippet. It gives developers a quick browser-based way to solve a focused react native shadow generator task before moving the result into a project.

How to design a shadow

Choose a preset or move the sliders. The two cards show an approximate iOS and Android shadow. Use the "Code" list to choose what to copy.

Elevation

Elevation is suggested from your iOS values. Pick your own number from 0 to 24 if you prefer.

Common mistakes

Setting only shadow props and expecting Android to match: Android ignores them (apart from the colour) and needs elevation.
Using overflow: hidden on the view that has the shadow: it clips the shadow away.

Frequently asked questions

Why do iOS and Android need different code?

iOS draws shadows from four props (shadowColor, shadowOffset, shadowOpacity, shadowRadius). Android uses one number, elevation. React Native 0.76 and newer (new architecture) also accept a CSS-like boxShadow on both. Platform.select lets you write both in one style.

What does elevation do on Android?

A higher elevation gives a larger, softer shadow and raises the view above others. Values run from 0 to 24. On Android 9 (API 28) and newer, shadowColor tints the shadow.

Why does my iOS shadow not show?

The view needs a background colour, and overflow: "hidden" on the same view cuts the shadow. Put the shadow on an outer View and the clipped content in an inner View.

Are the previews exact?

No. They are approximations drawn by the browser. Always check on a device or emulator.

How do I use this react native shadow generator tool?

Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.

More Frontend & Design

User-Agent ParserSee which browser and device a visitor uses SVG OptimizerMake SVG images smaller Color ConverterConvert colours between HEX, RGB and HSL Color Blindness SimulatorSee how colour-blind people see your design CSS Effects GeneratorCreate gradients and shadows visually Meta Tag / Open Graph PreviewPreview how your page looks on Google and social Image Resizer / CropperResize photos, including passport size Base64 Image ConverterTurn an image into text code, and back

View all Frontend & Design tools →