Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

linear-gradient()

背景に線形のグラデーションを指定できます。使用するときは『background』の値に『linear-gradient』を指定して下さい。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないとグラデーションが効かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。

円形のグラデーションを指定したい場合は、『linear-gradient』ではなく『radial-gradient』を使用してください。また、IE9以下でグラデーションを指定するときは『filter』を使用してください。

サンプルコード
background: linear-gradient(#FFFFFF, #C9C9C9);
background: -webkit-linear-gradient(#FFFFFF, #C9C9C9);
background: -mozlinear-gradient(#FFFFFF, #C9C9C9);
background: -ms-linear-gradient(#FFFFFF, #C9C9C9);

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

ブラウザ名ベンダープレフィックスが必要なバージョン
ChromeChrome 25以下
SafariSafari 6以下
FirefoxFirefox 16以下
AndroidAndroid 5.0以下
iOSiOS 6.1以下
ブラウザでの表示結果
background: linear-gradient(#FFFFFF, #C9C9C9);
background: -webkit-linear-gradient(#FFFFFF, #C9C9C9);
background: -mozlinear-gradient(#FFFFFF, #C9C9C9);
background: -ms-linear-gradient(#FFFFFF, #C9C9C9);
height: 150px;

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

※Androidはバージョン5.0からベンダープレフィックスが無くても使用することができますが、バージョン4系以下のブラウザではベンダープレフィックスが必要になります。

概要

背景に線形のグラデーションを指定できます。記述方法は
『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;

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。