linear-gradient()

background: linear-gradient(#FFFFFF, #C9C9C9);
background: -webkit-linear-gradient(#FFFFFF, #C9C9C9);
background: -mozlinear-gradient(#FFFFFF, #C9C9C9);
background: -ms-linear-gradient(#FFFFFF, #C9C9C9);

ベンダープレフィックスが必要なバージョンは下記を参考にしてください。

background: linear-gradient(#FFFFFF, #C9C9C9);
background: -webkit-linear-gradient(#FFFFFF, #C9C9C9);
background: -mozlinear-gradient(#FFFFFF, #C9C9C9);
background: -ms-linear-gradient(#FFFFFF, #C9C9C9);
height: 150px;

背景に線形のグラデーションを指定できます。記述方法は
『linear-linear-gradient(『開始位置』 『角度』, 『開始色』, 『途中色』, 『終了色』;)』
になります。『開始位置』、『角度』、『途中色』は省略する事ができますが、省略した場合の開始位置は『top』、角度は『0deg』と指定されているものとされ『途中色』は指定されていないものと扱われます。

サンプルでは上から下へグラデーションしていますが、『開始位置』を指定することにより『横方向』や『斜め方向』からグラデーションを描画する事もできます。

ベンダープレフィックスを使用しない場合は開始位置を反対の方向から指定する必要があり、『to』をつけて『to right』と指定する必要があるので注意して下さい。

background: -moz-linear-gradient(left, #ffffff, #C9C9C9);
background: -webkit-linear-gradient(left, #ffffff, #C9C9C9);
background: -ms-linear-gradient(left, #ffffff, #C9C9C9);
background: linear-gradient(to right, #ffffff, #C9C9C9); /* ベンダープレフィックスを使用しない時は、開始位置を『to right』と指定することで左から右方向に描画できます。 */
height: 150px;

斜め方向に設定する時は角度『deg』を指定し、反時計回りに角度が変わります。

尚、ベンダープレフィックスを使用しない場合の回転方向は反時計回りではなく、時計回りに変化しますのでご注意下さい。例えば、ベンダープレフィックスを使用している時に『45deg』となる位置に回転させたい場合には『135deg』と記述する必要があります。

background: -moz-linear-gradient(45deg, #ffffff 0%, #C9C9C9 100%);
background: -webkit-linear-gradient(45deg, #ffffff 0%, #C9C9C9 100%);
background: -ms-linear-gradient(45deg, #ffffff 0%, #C9C9C9 100%);
background: linear-gradient(135deg, #ffffff 0%, #C9C9C9 100%);
height: 150px;

途中色を追加することで複数色のグラデーションを指定することができます。使用するときは『,』で区切り『途中色』追加します。
色の位置を指定する場合は、色の値から半角スペースを空け各色の位置を指定して下さい。

background: -moz-linear-gradient(#ff0000 0%, #ffff00 40%, #ffff00 60%, #0000ff 100%);
background: -webkit-linear-gradient(#ff0000 0%, #ffff00 40%, #ffff00 60%, #0000ff 100%);
background: -ms-linear-gradient(#ff0000 0%, #ffff00 40%, #ffff00 60%, #0000ff 100%);
background: linear-gradient(#ff0000 0%, #ffff00 40%, #ffff00 60%, #0000ff 100%);
height:　150px;

上記サンプルでは、色の位置は『%』でしたが、『px』などの単位で指定することもでき色も『rgb()』で指定することができます。読みづらくなってしまいがちですが『rgb()』と『ウェブカラー』(カラーコード)を同時に指定することができます。

background: -moz-linear-gradient(rgb(255,0,0) 0px, #ffff00 60px, #ffff00 90px, rgb(0,0,255) 150px);
background: -webkit-linear-gradient(rgb(255,0,0) 0px, #ffff00 60px, #ffff00 90px, rgb(0,0,255) 150px);
background: -ms-linear-gradient(rgb(255,0,0) 0px, #ffff00 60px, #ffff00 90px, rgb(0,0,255) 150px);
background: linear-gradient(rgb(255,0,0) 0px, #ffff00 60px, #ffff00 90px, rgb(0,0,255) 150px);
height: 150px;

背景画像に重ねてグラデーションをかける事もできます。

background: -moz-linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(dictionary-css/img/sample.jpg);
background: -webkit-linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(dictionary-css/img/sample.jpg);
background: -ms-linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(dictionary-css/img/sample.jpg);
background: linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(dictionary-css/img/sample.jpg);
width: 300px;
height: 200px;