Edit on
<div class="box box-red">Box 1</div>
<div class="box box-gray">Box 2</div>
<div class="box box-blue">Box 3</div>
<div class="box box-darkblue">Box 4</div>
$blue: #3498DB;
$red: #C0392B;
$gray: #555555;
$darkblue: #34495E;
$black: #222;

@mixin shadow($x: 0px, $y: 2px, $blur: 8px, $color: $black) {
  box-shadow:$x $y $blur $color;
  -webkit-box-shadow:$x $y $blur $color;
    -khtml-box-shadow:$x $y $blur $color;
      -moz-box-shadow:$x $y $blur $color;
       -ms-box-shadow:$x $y $blur $color;
        -o-box-shadow:$x $y $blur $color;
}

body{background: #ccc;}

.box {
  width: 23%;
  height: 20rem;
  float:left;
  vertical-align: top;
  margin: 0 1%;
  text-align: center;
  color: white;
  font-size: 16px;
  line-height: 20em;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.box-red {
  background: $red;
  @include shadow();
}

.box-gray {
  background: $gray;
  @include shadow(0, 8px, 4px);
}

.box-blue {
  background: $blue;
  @include shadow(0, 4px, 4px, $darkblue);
}

.box-darkblue {
  background: $darkblue;
  @include shadow(0, 4px, 4px, $black);
}
View Compiled
Rerun