@mixin gradient($color: 'black', $direction:'bottom', $distance: 100%) {
  $gradient: transparentize($color, 1) 0%,
             transparentize($color, 1 - 0.019) .095 * $distance,
             transparentize($color, 1 - 0.07) .177 * $distance,
             transparentize($color, 1 - 0.138) .247 * $distance,
             transparentize($color, 1 - 0.212) .31 * $distance,
             transparentize($color, 1 - 0.291) .368 * $distance,
             transparentize($color, 1 - 0.373) .423 * $distance,
             transparentize($color, 1 - 0.455) .476 * $distance,
             transparentize($color, 1 - 0.538) .529 * $distance,
             transparentize($color, 1 - 0.62) .582 * $distance,
             transparentize($color, 1 - 0.701) .637 * $distance,
             transparentize($color, 1 - 0.781) .695 * $distance,
             transparentize($color, 1 - 0.857) .758 * $distance,
             transparentize($color, 1 - 0.925) .829 * $distance,
             transparentize($color, 1 - 0.978) .912 * $distance,
             $color $distance;
  background-image: linear-gradient(to $direction, $gradient);
}