CSS（Sass）でグラデ

Sassでのサンプル

@mixin gradient($colA:#ff9999, $colB:#9999ff, $direction:top) {
  $ffDir: top;
  $wkDir1: left top;
  $wkDir2: left bottom;
  
  @if      $direction == 'top'  { $ffDir:0deg;  $wkDir1:left top; $wkDir2:left bottom; }
  @else if $direction == 'side' { $ffDir:90deg; $wkDir1:left top; $wkDir2:right top; }
  @else                         { $ffDir:0deg;  $wkDir1:left top; $wkDir2:left bottom; }
  
  background: -moz-linear-gradient($ffDir, $colA, $colB); // Firefox用
  background: -webkit-gradient(linear, $wkDir1, $wkDir2, from($colA), to($colB)); // Safari,Google Chrome用
  background: linear-gradient($ffDir, $colA, $colB); // IE10+, W3C
}

// 縦向きのグラデ
.〇〇〇 {
  @include gradient(#〇〇〇, #〇〇〇, top);
}

// 横向きのグラデ
.〇〇〇 {
  @include gradient(#〇〇〇, #〇〇〇, side);
}

CSSでのサンプル

/** 縦向きのグラデ **/
.〇〇〇 {
  background: -moz-linear-gradient(0deg, #ff9999, #9999ff);
  background: -webkit-gradient(linear, left top, left bottom, from(#ff9999), to(#9999ff));
  background: linear-gradient(0deg, #ff9999, #9999ff);
}
  
/** 横向きのグラデ **/
.〇〇〇 {
  background: -moz-linear-gradient(90deg, #aaffff, #ffaaff);
  background: -webkit-gradient(linear, left top, right top, from(#aaffff), to(#ffaaff));
  background: linear-gradient(90deg, #aaffff, #ffaaff);
}