

@mixin gradient($start: #ccc, $amount:20%, $texture:none) {
  $end: rgba(0,0,0, $amount / 100%);
  @if $start != transparent {
    $end: darken($start, $amount)
  }
   
  background-image: $end $texture;
  background-image: $texture, -webkit-gradient(linear, left top, left bottom, color-stop(0%, $start), color-stop(100%, $end));  /* Chrome, Safari 4+ */
  background-image: $texture,    -moz-gradient(center top, $start 0%, $end 100%); 
  background-image: $texture, -webkit-linear-gradient(top, $start 0%,  $end);                                                    /* Chrome 10+, Safari 5.1+ */
  background-image: $texture,    -moz-linear-gradient(center top, $start 0%, $end 100%);                    /* FF 3.6+ */
  background-image: $texture,     -ms-linear-gradient(top, $start 0%, $end 100%);                            /* IE 10+ */
  background-image: $texture,      -o-linear-gradient(top, $start 0%, $end 100%);                             /* Opera 11.10+ */
  background-image: $texture,         linear-gradient(top, $start 0%, $end 100%);                                /* W3C */
}


@mixin radius_gradient($start: #ccc, $end: transparent, $amount:20%, $texture:none) {
  background: -moz-radial-gradient(center, ellipse cover, $start 0%, $end 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $start), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, $start 0%, $end 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, $start 0%, $end 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, $start 0%, $end 100%); /* IE10+ */
  background: radial-gradient(ellipse at center, $start 0%, $end 100%); /* W3C */
}
