CSS linear-gradient() Function

例

次の例では、先頭から直線勾配を示しています。その後、青に、黄色に移行し、赤を開始します：

#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard syntax */
}

»それを自分で試してみてください

定義と使用法

linear-gradient()関数が作成されます"image"色の直線勾配を表します。

線形グラデーションを作成するには、少なくとも二つのカラーストップを定義する必要があります。カラーストップを使用すると、の間で円滑な移行をレンダリングする色です。また、出発点と方向を設定することができます(or an angle)グラデーション効果と一緒に。

線形グラデーションの例：

バージョン：	CSS3

ブラウザのサポート

表中の数字は完全に機能をサポートする最初のブラウザのバージョンを指定します。

-webkit-続い番号、-moz-、または接頭辞で働いていた最初のバージョンを指定して-O-です。

関数
linear-gradient()	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -O-

CSSの構文

background: linear-gradient( direction , color-stop1 , color-stop2, ... );

値	説明
direction	出発点と方向を定義(or an angle)グラデーション効果と一緒に。
color-stop1, color-stop2,...	カラーストップを使用すると、の間で円滑な移行をレンダリングする色です。この値は、任意の停止位置に続くカラー値からなる(a percentage between 0% and 100% or a length along the gradient axis) 。

その他の例

例

左から始まる直線勾配。それは青に移行し、赤を開始します：

#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
}

»それを自分で試してみてください

例

左上から始まり直線勾配(and goes to bottom right) ：

#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}

»それを自分で試してみてください

例

指定した角度で直線勾配：

#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}

»それを自分で試してみてください

例

複数の色の線形グラデーションを停止します。

#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

»それを自分で試してみてください

例

透明性の直線勾配：

#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

»それを自分で試してみてください

CSS 参照

CSS プロパティ

CSS linear-gradient() Function

例

定義と使用法

ブラウザのサポート

CSSの構文

その他の例

例

例

例

例

例

関連ページ