Freebie: Google Material Design Shadow Helper

A LESS CSS mixin for creating box-shadows according to Google’s Material Design style guide

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.