Free Material Design Paper Shadow Mixins

Shadows to make the responsive design process easier.

Adding shadows to elements is a common recurring task in web design. Giving elements depth through use of subtle shadows can be tedious — even when you’re using a set of pre-defined styles or a frontend framework like Bootstrap. Although simple, these pre-processor mixins are a helpful addition to any project. Intended to emulate actual paper shadows, and inspired by Google’s Material Design document, there are five shadow depths included. Here’s how to get them:

Then include them in your project’s files:

Less:

Sass:

Stylus:

Note – import path is relative to the current less file, your path may differ.

Once you’ve imported them, simply call the mixin like (LESS):

Comments & Questions