<?xml version="1.0" encoding="utf-8"?>

Shadow elevation

Shadow elevation Bad Practice
Shadow elevation Best Practice

There is a direct relationship between shadow elevation and blur amount. Elevation is defined as the space between the element and the one beneath it along the z-axis. In general, the bigger and blurrier the shadow, the more significant distance is implied between the top and bottom elements. Elevation can provide immediate visual feedback that an element is clickable or tappable.

You can create several shadow styles to support visual hierarchy. Subtle, low-elevated shadows should be used for content with low priority, while blurrier, high-elevated shadows should indicate content with high priority.

Improve your UX & Product skills with interactive courses that actually work