How do I adjust the shadow in my app?

Here is how the shadow is set in a GoodBarber app, from the tap that turns it on to fine-tuning, down to the pixel.

In the design panel of a list, a widget or a category bar, whenever the layout allows it, adding a shadow takes one tap: “Enable shadow effect”. The path: My App › Structure › your section › Edit the design › STYLE OPTIONS. GoodBarber's default settings do the rest (3 px offset, 6 px blur, black at 20%). Discreet, the shadow lifts each element off the background without catching the eye.

The TabBar and the floating button carry their shadow from the start, a higher one (6 px offset, 12 px blur), because they sit above the content.

A shadow needs a surface to lift, such as a cell background, a thumbnail or a button. It never sits on a text or an icon, so as not to blur their reading.

You turn the shadow on; the system knows where it can sit, and at what level. This default setting makes your life easier and keeps your shadows consistent across the whole app. That is our “No design burden” principle, so that design is never a burden.

In real life, a shadow is never quite black. It takes the color of the light and of the surface it touches. Our default shadow is black for a good reason: it suits every palette, and that is what makes it safe from the first tap. A tinted shadow goes one step further. On a cream background, a brown shadow stays in tone with the background.

Here is the same screen twice. One value has changed, the color of the shadow, from the default black to the brown of the palette (the color key from step 3). Same offset, same blur, same strength. On the left, the cells lift off the background. On the right, they seem to rest on the page, and the whole page matches the palette. For a single key, the app looks drawn in one piece.

To judge a setting, do as here. Change one value at a time, save, and judge in the preview, with the whole page in view. A successful shadow is felt more than seen.

The same cell, in the same app, can carry very different shadows. At 5%, the shadow is barely visible: it lifts the cell and nothing more. Without blur, it cuts out sharply behind the cell, and the app gains character. The image shows four, from the most discreet to the boldest, all in type custom except the default one:

The default row only recalls its values: you have nothing to write to get it. The other three go into the editor as they are, key by key.

None of these shadows is better than another. Each gives the app a character, and all are set with the same keys. The hard shadow alone changes the character of an app, as in our art gallery app mockup, in neo-brutalism, on Dribbble, with an offset on both axes, zero blur and a solid color.

Under a colored button, a shadow of the same color. It is my favorite setting: 10 px offset, 24 blur, a strength of 38%. It does not weigh on the button, it makes it glow, like a halo, and the eye understands that this is the action that matters. I keep it for a single action per screen. If everything glows, nothing stands out.

The floating button is set once for the whole app, in App style, with the same { EDITION } button, under floatingButton, then button, then shadow, with the same keys.

The shadow at a glance

• One tap to turn it on, “Enable shadow effect”, in the design panel of a list.
• Three settings, the offset, the blur, the color and its strength.
• By default, 3 px offset, 6 px blur, black at 20%; 6 and 12 px under the TabBar and the floating button.
• One free extension for fine-tuning, Advanced edition, the { EDITION } button.
• One key to tint the shadow without touching the rest, color.
• Two positions, external (relief) or internal (hollow, kept for form fields).
• One trap, opacity is written with a point, 0.2 and not 0,2.