Max Glenister

UX & Design • 2 min read Plain text

Creating 'Material Design' shadows in Photoshop

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:

  • UX & Design · shares #guide
    Launching Sketch Toolbox from inside Sketch

    I’ve been making use of Sketch a lot lately. One of the coolest features of Sketch is it’s plugin support. I’m using a tool called Sketch Toolbox to manage plugins in Sketch – this functions a lot like Package Control for Sublime Text, but it’s a stand-alone application.

    July 2015 • 2 min read
  • Software & Servers · shares #guide
    Converting SVG to PNG online and in your terminal

    This post is mostly for my own benefit on the rare occasion that I have to convert SVG files to PNG. I always spend a large amount of time looking for an online SVG to PNG converter or a terminal one-liner to do this.

    August 2013 • 2 min read
  • UX & Design · shares #design
    Making GIMP feel less like punishment

    GIMP has always had an interface problem. I’m not blaming the GIMP team (they’ve built something powerful on a shoestring). They’ve been clear they’re not interested in copying Photoshop wholesale; their FAQ argues that designing around actual user research beats imitating someone else’s interface decisions. Fair enough in principle, but coming from years as a Photoshop user, that design still feels hostile to me. I’m just one user story out of many they’ve had to design for, but it still expects me to learn its own way of doing things rather than offering a config closer to what I’m used to out of the box.

    June 2026 • 2 min read

Discussion

  • U

    uuckyArchived archived comment · May 17, 2015

    Thank you very much! Really help!

  • SP

    Stan PetkanArchived archived comment · June 02, 2015

    That’s helpful! Thanks a lot! Keep up the good work!

  • E

    edwnxArchived archived comment · July 14, 2015

    Thank you!

  • EB

    Edward BernaysArchived archived comment · July 28, 2015

    You are the best kind of person. Thanks!

  • FA

    Fayez AhmedArchived archived comment · August 06, 2015

    Thanks!

  • JL

    Jon LehmanArchived archived comment · August 11, 2015

    I think I love you

  • J

    JeremTheOufArchived archived comment · June 20, 2016

    the CC library link seems to be dead

  • FC

    Franco ChanArchived archived comment · October 07, 2016

    Thank for your share , love you

  • SS

    Stephanie SeitzArchived archived comment · January 16, 2017

    Thank you! This is super helpful!

Join the conversation

Reply from your own site with a Webmention (how?).

Webmentions last fetched 14 November 2026, 10:07