CSS linear-gradient()関数
例
この線形グラデーションは上から始まります。赤から始まり、黄色、次に青に移行します。
#grad {
background-image: linear-gradient(red, yellow, blue);
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
linear-gradient()関数は、背景画像として線形グラデーションを設定します。
線形グラデーションを作成するには、少なくとも2つのカラーストップを定義する必要があります。カラーストップは、スムーズなトランジションをレンダリングしたい色です。グラデーション効果とともに、開始点と方向(または角度)を設定することもできます。
線形グラデーションの例:
バージョン: | CSS3 |
---|
ブラウザのサポート
表の数字は、この機能を完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Function | |||||
---|---|---|---|---|---|
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-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
その他の例
例
左から始まる線形グラデーション。赤から始まり、青に移行します。
#grad {
background-image: linear-gradient(to right, red , blue);
}
例
左上から始まり(そして右下に行く)線形グラデーション:
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
例
指定された角度の線形グラデーション:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
例
複数のカラーストップを持つ線形グラデーション:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
例
透明度のある線形グラデーション:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
関連ページ
CSSチュートリアル:CSSグラデーション