Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass Mixin: Google Material Design Shadow
/**
* A mixin which helps you to add depth to elements according to the Google Material Design spec:
* http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality
*
* Please note that the values given in the specification cannot be used as is. To create the same visual experience
* the blur parameter has to be doubled.
*
* Adapted from a LESS version at https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d
*
* Original Author: Florian Kutschera (@gefangenimnetz), Conceptboard GmbH (@conceptboardapp)
*
* Example usage:
*
* .card {
* width: 95px;
* height: 95px;
* background: #f4f4f4;
* -webkit-transition: all 250ms;
* -moz-transition: all 250ms;
* transition: all 250ms;
* @include box_shadow(1);
* &:hover {
* @include box_shadow(3);
* -webkit-transform: translateY(-5px);
* -moz-transform: translateY(-5px);
* transform: translateY(-5px);
* }
* }
*
*/
@mixin box_shadow ($level) {
@if $level == 1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} @else if $level == 2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
} @else if $level == 3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
} @else if $level == 4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
} @else if $level == 5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
}
@arendon1

This comment has been minimized.

Copy link

@arendon1 arendon1 commented Sep 21, 2017

This mixin is very helpful thanks for sharing it publicly.

@simonjamain

This comment has been minimized.

Copy link

@simonjamain simonjamain commented Sep 29, 2017

thanks, very helpfull

@snobojohan

This comment has been minimized.

Copy link

@snobojohan snobojohan commented Oct 16, 2017

Yes. Thank you so much

@1415926535

This comment has been minimized.

Copy link

@1415926535 1415926535 commented Oct 20, 2017

Word!

@christianstclair

This comment has been minimized.

Copy link

@christianstclair christianstclair commented Mar 27, 2018

This is great. Google-Material-UI-Color-Palette for colors is also one of my favorites.

@josedesigner

This comment has been minimized.

Copy link

@josedesigner josedesigner commented Apr 26, 2020

Thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment