Box Shadow Generator: Mobile Elevation Guide

Use a box shadow generator to define six Material elevation levels—0, 1, 3, 6, 8, and 12 dp—then assign each level one stable layer role: base surface, card, selected surface, floating control, modal surface, or critical dialog. Tint low-opacity shadows from the surface hue, stack a tight contact shadow with a wider diffuse shadow, and test the scale on light and dark screens. On iOS, favour grouped surface contrast and system blur before adding a shadow. In dark mode, raise surfaces by increasing lightness rather than making shadows darker.

Key takeaways

• •Material Design 3 defines elevation levels at 0, 1, 3, 6, 8, and 12 dp.
• •Use 0 dp for the base surface and reserve 12 dp for critical dialogs.
• •A two-layer shadow needs a tight contact layer and a wider diffuse layer.
• •Material 3 dark themes communicate elevation through tonal surface lightness.
• •iOS materials and grouped backgrounds often separate content without a drop shadow.

This guide is for mobile UI/UX designers, founders, and engineers who already work with iOS and Android component libraries.

Time: 35 minutes · You'll need: A mobile screen file with light and dark colour schemes, Material Design 3 elevation reference, An iOS Simulator or physical iPhone, An Android emulator or physical Android device, floow.design Box Shadow Generator or a design tool with X/Y, blur, spread, colour, and opacity controls

What's on this page

1. •Assign Material elevation levels to layer roles
2. •Create a tinted ui shadow design token
3. •Stack two shadows for each card shadow mobile
4. •Use iOS contrast and blur before heavy shadows
5. •Raise dark surfaces with tonal elevation
6. •Reference table

• •Common mistakes
• •FAQs

Build a mobile elevation scale with box shadow generator

1. Assign Material elevation levels to layer roles

Create exactly six named tokens: Elevation 0, 1, 2, 3, 4, and 5. Map them to Material Design 3’s 0 dp, 1 dp, 3 dp, 6 dp, 8 dp, and 12 dp levels. Use 0 dp for the app canvas and surfaces that sit in the same plane. Use 1 dp for resting cards and contained content groups. Use 3 dp for a selected or raised surface, such as an elevated card or transient menu. Use 6 dp for floating controls such as a floating action button. Reserve 8 dp for a modal surface that must clearly interrupt the current task, and 12 dp for a critical dialog.

Do not give every card a different value. A finance app with account cards, transaction rows, a bottom sheet, and a confirmation dialog should use at most four visible levels on one screen: 0, 1, 8, and 12 dp. The result should let a person identify the active layer before reading its label.

Tip: Use elevation changes to express a change in interaction priority, not to decorate every rectangular container.

2. Create a tinted ui shadow design token

Start from the surface colour rather than pure #000000. Sample the hue family used by the surface or its neutral palette, then create a darkened, low-opacity shadow colour. For a lavender-tinted Material surface such as #F7F2FA, test a muted purple-grey shadow rather than neutral black. Keep the opacity low: begin around 8% to 14% for the contact layer and 4% to 8% for the diffuse layer.

Apply the same shadow colour family throughout the light theme. Change only offset, blur, spread, and opacity by elevation token. This prevents a card shadow from looking blue-grey while a modal shadow looks black-grey. Check the screen at 100% device scale and on a real OLED display; a shadow that appears delicate against a desktop canvas can become a muddy rim around every card on a phone.

Treat these values as a visual starting point, not a platform specification. The required outcome is a visible layer relationship without a dark outline around the component.

Tip: If the shadow reads as a border at 1× scale, reduce contact-layer opacity before increasing blur.

3. Stack two shadows for each card shadow mobile

Build each nonzero token from two shadows. The first is a tight contact shadow: a small vertical offset, short blur, and slightly higher opacity. The second is a diffuse shadow: a larger vertical offset, wider blur, and lower opacity. For a 1 dp card starting point, try a contact layer of 0 1 2 at 12% opacity and a diffuse layer of 0 4 8 at 6% opacity, both using the same tinted colour. Use design-tool pixels for the visual recipe, then tune it against the target device density.

Increase the diffuse layer before increasing the contact layer as the token rises. A 6 dp floating control can use a stronger, wider diffuse layer while retaining a restrained contact edge. Avoid a positive spread unless the component is visibly floating; spread often creates the grey halo that makes mobile cards look stamped onto the screen.

Record both layers in the token name or component documentation. A single shadowOpacity value cannot reproduce a two-layer result across CSS, SwiftUI, Compose, and Flutter.

Tip: Place a card over both a plain surface and a photo or map preview; the shadow must not become the strongest contrast on either background.

4. Use iOS contrast and blur before heavy shadows

On iOS, separate levels first with grouped backgrounds, spacing, and system materials. A settings-style screen can place a grouped card on an inset grouped background with no visible drop shadow. A transient control can use a system blur material, such as SwiftUI Material, when the content beneath it should remain contextually visible. Add a restrained shadow only when the control overlaps scrolling content or another active surface.

This follows Apple’s visual-hierarchy approach: colour, grouping, translucency, and motion can establish depth without Android-style ambient shadows. Test the design with Reduce Transparency enabled. When that accessibility setting removes or reduces translucent material effects, the component still needs a distinct opaque background and legible boundaries. Do not rely on blur alone to identify a destructive confirmation dialog or an active bottom sheet.

For iOS and Android versions of the same product, share the semantic token—such as modal—but permit different rendering. Matching an Android 8 dp shadow exactly on iOS usually produces an unnecessarily heavy interface.

Tip: A 1 px separator and a grouped surface often communicate an iOS list hierarchy more cleanly than a card shadow.

5. Raise dark surfaces with tonal elevation

Create a separate dark-theme elevation treatment. Do not make a black or near-black shadow more opaque to indicate height; it usually disappears into the background or creates a dirty edge. Material Design 3 uses tonal elevation, where elevated dark surfaces become lighter or receive a tonal tint relative to the base surface. Define a darker base surface for 0 dp, then assign progressively lighter surface-container colours to your 1, 3, 6, 8, and 12 dp roles.

For example, an account card at 1 dp should be perceptibly lighter than the 0 dp app canvas, while a modal at 8 dp should be distinct from both. Preserve text contrast independently: WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text. Evaluate the colour values after the tonal change, not only on the original base surface.

Build the stack manually by entering two shadow layers and the dark-theme surface token in your design tool. When ready, use floow.design’s free Box Shadow Generator at /free-tools/box-shadow-generator to preview stacked shadows and export CSS, Tailwind, SwiftUI, Compose elevation, or Flutter values.

Tip: If a dark modal only reads as elevated after adding a strong black shadow, its surface-lightness step is too small.

Reference table

Material Design 3 elevation token scale

Do it with the free Box Shadow Generator

Stack multiple shadows with a live preview, then export as CSS, Tailwind, SwiftUI, Compose elevation or Flutter.

Open the Box Shadow Generator → — free, no sign-up.

Common mistakes

Using pure black at 20% opacity for every component shadow.

Use a shadow colour from the surface’s hue family and lower opacity. Apply the same colour token across the scale so depth does not change colour between components.

Treating 1, 3, 6, 8, and 12 dp as five mandatory card styles.

Assign levels to interaction roles. Most mobile screens need 0 dp plus one resting level and, at most, one active overlay level.

Using one blurred shadow with a large positive spread.

Use a short, tighter contact layer plus a low-opacity diffuse layer. Remove positive spread unless the component visibly floats above content.

Darkening shadows in dark mode to create depth.

Use lighter or tonally tinted elevated surfaces. Material 3’s dark-theme elevation is communicated by surface treatment, not a heavier black shadow.

Frequently asked questions

What Material elevation levels should I use in a mobile app?

Material Design 3 defines six elevation levels: 0, 1, 3, 6, 8, and 12 dp. Map them to stable roles rather than arbitrary components: base surface, resting card, selected surface, floating control, modal surface, and critical dialog. A screen does not need to show every level.

How do I make card shadows look less muddy on mobile?

Make card shadows less muddy by tinting a low-opacity shadow from the surface colour family and stacking two layers instead of using one black blur. Use a tighter, slightly darker contact layer and a broader, lighter diffuse layer. Check the result at actual device size, where excessive spread becomes a visible grey outline.

Should iOS apps use the same material elevation shadows as Android?

iOS apps should share elevation meaning with Android but do not need to copy Android shadow rendering. Use grouped backgrounds, contrast, spacing, and system materials to establish iOS hierarchy, then add a restrained shadow for overlapping or floating controls. Test translucent treatments with Reduce Transparency enabled.

How should ui shadow design work in dark mode?

Dark-mode UI shadow design should raise surfaces through lightness and tonal changes rather than stronger black shadows. Material Design 3 calls this tonal elevation. Give elevated cards, sheets, and dialogs a lighter surface token than the base canvas, then verify text still meets WCAG 2.2 AA contrast requirements.

Can I use a box shadow generator for SwiftUI and Compose?

You can use a box shadow generator to define the visual shadow recipe, then translate its layers into SwiftUI and Compose rendering values. Keep the semantic token and its intended elevation role consistent across platforms. Validate the exported result on device because CSS blur and native shadow APIs do not always rasterize identically.

Where this leaves you

A useful elevation scale makes a screen’s active layer obvious without putting a grey cloud behind every card. Start with Material Design 3’s six dp levels, but expose only the roles your flow needs. Use tinted, two-layer shadows in light themes; let iOS grouping and blur do more of the separation work; and use tonal surface lightness in dark themes. The next action is to audit one existing mobile screen: label every visible surface with 0, 1, 3, 6, 8, or 12 dp, then remove any shadow that does not communicate a different layer.

---

Design the screens first

Describe the screen you need in plain English and floow.design generates production-ready iOS and Android layouts you can iterate on by chat, then export to Figma or code. Design your mobile app screens in floow.design first, then build.

Start designing free →

---

Related

• •Flexbox Generator — Build a flex layout visually, then export it as CSS, Tailwind, SwiftUI, Compose, React Native or Flutter.
• •CSS Grid Generator — Lay out rows, columns and gaps visually, then export as CSS, Tailwind, LazyVGrid, Compose or Flutter.
• •Border Radius Generator for Mobile UI — Use a border radius generator to set a three-step mobile radius scale, preserve concentric
• •Gradient Generator: Mobile UI Gradient Design — Use a gradient generator to design smooth mobile gradients, avoid 8-bit banding, protect t
• •Gemini 3.1 for Mobile App UI Design: 4 Real Prompts Tested Hands-On (2026) — I tested Gemini 3.1 Pro with 4 real mobile app UI prompts — fitness tracker, food delivery

Sources

• •Material Design 3 — Elevation
• •Material Design 3 — Dark theme
• •Apple Human Interface Guidelines — Materials
• •Android Developers — Shadows and clipping
• •W3C — WCAG 2.2 Contrast (Minimum)