Shadow Concept

Foundations / Visual / Shadow Concept

Intro

The shadow concept offers a standard way to show depth in applications. It defines several depth levels that apply to all container components, such as tiles, menus, dialogs, and other elements. Each depth level uses a unique shadow, so you can easily distinguish one layer from another. This helps create a consistent visual hierarchy.

The shadow concept also covers interaction shadows and text shadows, which improve the user experience and make text easier to read. These shadows come with the component.

The four content shadow levels in the Horizon theme

Content Shadow Levels

You’ll find examples for each shadow level below, shown in four different theming variants. These examples illustrate the visual layering hierarchy of container components in the UI.

Content Shadow Level 0

The examples below show content shadow level 0 on the overview page.

(In order: Morning Horizon, Evening Horizon, High-Contrast Black, High-Contrast White)

Content Shadow Levels 1 and 2

The examples below show a combination of content shadow levels 1 and 2.

Content shadow level 1 is used by the following components:

Content shadow level 2 is used by the following components:

Content shadow level 1 is used by the following components:

  • Action sheet
  • Floating footer
  • Menu

Content shadow level 2 is used by the following components:

  • Popover
  • Message toast
  • Notifications

(In order: Morning Horizon, Evening Horizon, High-Contrast Black, High-Contrast White)

Content Shadow Level 3

The example below shows the level 3 shadow styling for a dialog.
The example below shows the level 3 shadow styling for a dialog.

(In order: Morning Horizon, Evening Horizon, High-Contrast Black, High-Contrast White)

Learn More

For more detailed best practices, check the full shadow concept specification.

Implementation

Visual Design

Implementation