Material Design Box Shadow Sass Mixin... with 'silky smooth' performant box shadow animation technique from: http://tobiasahlin.com/blog/how-to-animate-box-shadow/

material-design-box-shadow.scss

// Material Design Box Shadows
// 'Silky Smooth' performant box shadow animation technique from: http://tobiasahlin.com/blog/how-to-animate-box-shadow/

@mixin material-box-shadow($level, $hover) {

  $shadow-initial: 0;
  $shadow-hover: 0;
  
  @if $level == 1 {
    $shadow-initial: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    $shadow-hover: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }

  @if $level == 2 {
    $shadow-initial: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    $shadow-hover: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); // needs own settings
  }

  @if $level == 3 {
    $shadow-initial: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    $shadow-hover: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); // needs own settings
  }

  @if $level == 4 {
    $shadow-initial: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    $shadow-hover: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); // needs own settings
  }

  @if $level == 5 {
    $shadow-initial: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    $shadow-hover: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); // needs own settings
  }

  // return:
  box-shadow: $shadow-initial;
  @if $hover == true {
      &::after {
      content: '';
      position: absolute;
      top: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
      box-shadow: $shadow-hover;
      opacity: 0;
    }  
    &:hover::after {
      opacity: 1;
    }
  }
}

.card {
  @include material-box-shadow(2, true);
}