Resources– Shadows

Shadows

Shadows provide important visual cues about objects’ depth and directional movement. An object’s elevation determines the appearance of its shadow. For guidance on elevation and shadows in material design view Shadows and elevation guidance in the design guidelines.

For developer documentation on shadows in Android or Polymer:

Material Design Android Logo
Defining Shadows and Clipping Views

Shadows are drawn and clipped by parent elements

Material Design Polymer Logo
Paper Shadows

Shadows are rendered in two layers to create a realistic effect

Sketch Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Sketch Material elevations

The table to the right is a listing of shadow values for Sketch.

Material Design Download Logo
Shadows in Sketch
0.07 MB (.sketch)

1dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

0

2

1

Blur:

2

2

3

Spread:

0

0

0

2dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

0

3

1

Blur:

4

4

5

Spread:

0

0

0

3dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

3

3

1

Blur:

3

4

8

Spread:

0

0

0

4dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

2

4

1

Blur:

4

5

10

Spread:

0

0

0

6dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

6

1

3

Blur:

10

18

5

Spread:

0

0

0

8dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

8

3

4

Blur:

10

14

15

Spread:

1

3

0

9dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

9

3

5

Blur:

12

16

6

Spread:

1

2

0

12dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

12

5

7

Blur:

17

22

8

Spread:

2

4

0

16dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

16

6

8

Blur:

24

30

10

Spread:

2

5

0

24dp elevation

Key Shadow

Ambient shadow

Umbra

Penumbra

Opacity:

14

12

20

X：

0

0

0

Y：

24

9

11

Blur:

38

46

15

Spread:

3

8

0

Illustrator Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Illustrator Material elevations

The table to the right is a listing of shadow values for Illustrator.

Material Design Download Logo
Shadows in Illustrator
1.65 MB (.ai)

1dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

.92

0

Blur:

.5

.67

2dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

1.83

0

Blur:

1

1.33

3dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

2.75

0

Blur:

1.5

2

4dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

3.67

0

Blur:

2

2.67

6dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

5.5

0

Blur:

3

4

8dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

7.33

0

Blur:

4

5.33

9dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

8.25

0

Blur:

4.5

6

12dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

11

0

Blur:

6

8

16dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

14.67

0

Blur:

8

10.67

24dp elevation

Key Shadow

Ambient shadow

Opacity:

26%

8%

X：

0

0

Y：

22

0

Blur:

12

16

Photoshop Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Photoshop Material elevations

The table to the right is a listing of shadow values for Photoshop.

Material Design Download Logo
Shadows in Photoshop
1.09 MB (.psd)

1dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

2

1

Spread:

6

2

Size:

3

4

2dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

3

1

Spread:

6

2

Size:

5

7

3dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

5

2

Spread:

6

2

Size:

7

10

4dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

7

3

Spread:

6

2

Size:

10

13

6dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

10

4

Spread:

6

2

Size:

15

20

8dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

13

5

Spread:

6

2

Size:

20

27

9dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

18

9

Spread:

6

2

Size:

27

36

12dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

20

8

Spread:

6

2

Size:

30

41

16dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

28

11

Spread:

6

2

Size:

40

53

24dp elevation

Key Shadow

Ambient shadow

Opacity:

24%

16%

Angle:

90

90

Distance:

39

15

Spread:

6

2

Size:

60

81