Free Material Design Shadow Mixins

Adding shadows to elements is a 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 minimal, 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 with hover states.

Here's how to get them:

bower install paper-shadows --save

Then include them in your project's files:

Less:

@import "less/shadows";

Sass:

@import "sass/shadows";

Stylus:

@import "stylus/shadows"

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):

.your-class {
    .shadow-level(1);
}
  • Options range from -1 to 5
  • -1 will cause an inset shadow
  • 0 will cause no shadow

Feel free to check out the code on Github

Next Post Previous Post

Blog Comments powered by Disqus.