A Pen by Ben Strahan.

Authentic-Material-Design-Shadows-without-Web-Components.markdown

Authentic Material Design Shadows without Web Components

I have seen a bunch of people trying to make the Material Design shadows. They all tend to be slightly wrong and at close inspection look nothing like Google's original. I found that Polymer had the best CSS implementation of the shadows but they were placed there by Web Component's and the Shadow DOM which does not help about 99% of us (yet!). The shadows in this pen use pseudo elements to achieve the exact same quality as the Google spec. Enjoy!

A Pen by Ben Strahan on CodePen.

License.

index.html

<h1>True Material Design Shadows</h1>

<div class="flex">
  <div class="content">
    <div class="flex card shadow-1">1</div>
    <div class="flex card shadow-2">2</div>
    <div class="flex card shadow-3">3</div>
    <div class="flex card shadow-4">4</div>
    <div class="flex card shadow-5">5</div>
  </div>
  <div class="content top">
    <div class="flex fab shadow-btn">F</div>
    <div class="flex btn-raised shadow-btn">raised</div>
  </div>
</div>

style.less

/*This uses LESS Hat http://lesshat.madebysource.com/*/

@import url(http://fonts.googleapis.com/css?family=Roboto:300);
body { font-family: 'Roboto', sans-serif; font-size: 1.5em; color: #717171; background: #FAFAFA;}
h1 { text-align: center; padding-top: 24px; }

.shadow-config() {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  .border-radius(inherit);
  pointer-events: none;
  .box-sizing(border-box);
}

.shadow {
  &-1:before {
    .shadow-config();
    .box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.26)); 
  }
  &-1:after {
    .shadow-config();
    .box-shadow(0 2px 10px 0 rgba(0, 0, 0, 0.16));
  }
  &-2:before {
    .shadow-config();
    .box-shadow(0 8px 17px 0 rgba(0, 0, 0, 0.2));
  }
  &-2:after {
    .shadow-config();
    .box-shadow(0 6px 20px 0 rgba(0, 0, 0, 0.19));
  }
  &-3:before {
    .shadow-config();
    .box-shadow(0 12px 15px 0 rgba(0, 0, 0, 0.24));
  }
  &-3:after {
    .shadow-config();
    .box-shadow(0 17px 50px 0 rgba(0, 0, 0, 0.19));
  }
  &-4:before {
    .shadow-config();
    .box-shadow(0 16px 28px 0 rgba(0, 0, 0, 0.22));
  }
  &-4:after {
    .shadow-config();
    .box-shadow(0 25px 55px 0 rgba(0, 0, 0, 0.21));
  }
  &-5:before {
    .shadow-config();
    .box-shadow(0 27px 24px 0 rgba(0, 0, 0, 0.2));
  }
  &-5:after {
    .shadow-config();
    .box-shadow(0 40px 77px 0 rgba(0, 0, 0, 0.22));
  }
  &-btn:before {
    .shadow-config();
    .box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.26)); 
  }
  &-btn:after {
    .shadow-config();
    .box-shadow(0 2px 10px 0 rgba(0, 0, 0, 0.16));
  }
  &-btn:active {
    &:before {
    .shadow-config();
    .box-shadow(0 8px 17px 0 rgba(0, 0, 0, 0.2));
    .transition(box-shadow 0.28s cubic-bezier(0.4, 0, 0.2,1));
    }
    &:after {
      .shadow-config();
      .box-shadow(0 6px 20px 0 rgba(0, 0, 0, 0.19));
      .transition(box-shadow 0.28s cubic-bezier(0.4, 0, 0.2,1));
    }
  }
}


.fab {
  position: relative;
  outline: none;
  cursor: pointer;
  z-index: 0;
  width: 56px;
  height: 56px;
  background: #d23f31;
  font-size: 14px;
  color: #fff;
  padding: 16px;
  .user-select(none);
  .border-radius(50%);
  .box-sizing(border-box);
}

.btn-raised {
  background: #4285f4;
  color: #fff;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  min-width: 5.14em;
  padding: 0.7em 0.57em;
  margin: 0 0.29em;
  text-align: center;
  font: inherit;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
  border-radius: 3px;
  user-select: none;
  cursor: pointer;
  z-index: 0;
  }


.card {
  background: white;
  width: 250px;
  height: 140px;
  position: relative;
  .border-radius(2px);
  .box-sizing(border-box);
  font-size: 1.5em;
}

.content > div {
  margin: 40px;
}


.flex {
  .display(flex);
  .flex-direction(row);
  .flex-wrap(nowrap);
  .justify-content(center);
  .align-items(center);
}

.top {
  .align-self(flex-start);
}