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:

Defining Shadows and Clipping Views
Shadows are drawn and clipped by parent elements

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.

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.

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.

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