Freebie: Google Material Design Shadow Helper

One of the things that Google revealed at the Google I/O 2014 was the new visual language for all their apps, services and Android OS — called material design. Together with the keynote they released a living style guide.

I am impressed by the attention Google pays to all the details in their guide. I was especially impressed by the section on shadows which are used to define different layers and thus create depth.

Shadows with different offset and blur are used to simulate depth.
(Image: Google, Material Design specification)

I created a neat little LESS CSS mixin that allows you to easily set box-shadows for modals and dialogs according to the spec, and I would like to share it with you.

https://gist.github.com/gefangenimnetz/3ef3e18364edf105c5af.js

Interestingly one cannot directly copy the illustrator parameters into CSS/LESS code since they do not translate 1:1. I had to double the blur parameter to make it look identical.

Pro tip: Change the BoxShadowHelper level and translate along the y-axis on interactions (e.g. :hover) for that extra “wow!” (see Gist around line 13 for an example).

Kudos to Google for their new visual language and excellent style guide.

--

--

Florian is 1:1.6th designer and round(0,6) developer, cherishing the pixels and code at @Conceptboardapp. At home he is being used as a toy by his two sons.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store