Material Design drop shadows for your Sass projects.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Quantum Shadows Logo

Use the drop shadows from Google's Material Design spec in your Sass projects.

Codepen Demo


  • Install via Bower bower install quantum-shadows --save
  • Download and add to your project manually


NOTE: Quantum Shadows assumes you already have a solution for dealing with prefixes.

Import Quantum Shadows at the top of your Sass files. For example:

@import "../bower_components/quantum-shadows/quantum-shadows";

Right now, it's just a simple mixin away. The mixin takes a value between 1 and 5 for $depth, where 1 is closest to the surface (smaller shadow) and 5 is the farthest (larger shadow). For example, to include a drop shadow with a z-depth of 1:

.my-stylish-element {
    @include drop-shadow(1);

That's all there is to it. I am considering adding more functionality to this in the future, but for now I really just wanted an easy way to use the Material Design drop shadows in my Sass projects.

If you find any bugs or have suggestions for a future version, please feel free to submit an issue.


v1.0.0 (10-02-2014):

  • First release
  • Bower support
  • Discoverable on Sache