Creating 'Material Design' shadows in Photoshop

January 19 2015 • 2 min read

designguidephotoshop

This post was published in 2015 and is kept here for reference. It may contain information that's outdated or inaccurate. All external links and references have been updated to point to archived versions on archive.org where possible.

Somebody over on Designer News asked how to re-create the various z-height shadow effects from Google’s Material Design in Photoshop.

This is something I’ve been playing with a bit lately, so I dove in to the CSS from the Polymer Project documentation, found the z-height styles, and then whipped up a .psd to demonstrate how to achieve the effect:

Download the PSD

An explanation of the styles

The Material Design shadows are actually comprised of two shadows on each element, as you can see below. This example shows the z-height: 5 shadow. First the ‘top shadow’, then the ‘bottom shadow’, then the effect caused by composing them together:

You’d use something like this to create the z-height: 5 shadow effect using CSS:

.paper-shadow-z-5 {
    box-shadow:
        0 40px 77px 0 rgba(0,0,0,.22),
        0 27px 24px 0 rgba(0,0,0,.2);
}

And in Photoshop… bottom on the left, top on the right:

Updated for Adobe Photoshop CC 2015

Today Adobe Photoshop CC 2015 was released, with support for multiple (up to 10) instances of each layer style per layer. This coupled with the ability to ‘Copy CSS’ for a layer means that we can do this a lot more easily.

Here’s a preview of the same effect, but using the new functionality:

Here is an updated version of the PSD that will only work in CC2015+:

Download the PSD for CC2015

Update 2

dbox has created a CC Library and SCSS mixin to make things a little easier:

This post is also available in plain text

Max Glenister