CSS3による線形グラデーション | CSS3逆引き | Webサイト制作支援

線形グラデーションについて

グラデーションはbackgroundまたはbackground-imageプロパティにlinear-gradient関数を設定します。
開始位置と終了位置は省略することができ、省略した場合、開始位置は0、終了位置は100%が初期値として設定されます。

なお、旧Webkit仕様では、from関数は開始位置を0、to関数は終了位置を1という仕様になっています。
開始と終了位置を指定したい場合はcolor-stop関数を使用します。

構文

位置の省略

							background:linear-gradient(方向または角度, 開始位置, 終了位置);
							旧Webkit仕様：
							background:-webkit-gradient(linear, 開始方向, 終了方向, from(開始色), to(終了色));

位置の指定あり

							background:linear-gradient(方向または角度, 開始色 開始位置, 終了色 終了位置);
							旧Webkit仕様：
							background:-webkit-gradient(linear, 開始方向, 終了方向, color-stop(開始位置, 開始色), color-stop(終了位置, 終了色));

方向
名称	設定値	設定値（toなし）	設定値旧webkit仕様
上→下	to bottom	top	開始方向：left top 終了方向：left bottom
下→上	to top	bottom	開始方向：left bottom 終了方向：left top
左→右	to right	left	開始方向：left top 終了方向：right top
右→左	to left	right	開始方向：right top 終了方向：left top
左上→右下	to right bottom	left top	開始方向：left top 終了方向：right bottom
右上→左下	to left bottom	right bottom	開始方向：right top 終了方向：left bottom

角度

角度の指定は単位をdegとして指定します。
角度はxの左側を0とし、反時計回りを正、時計回りを負として指定することができます。

サンプル

縦方向

横方向

斜め

角度（60度）

CSS

/* 縦方向 */
								div.sample {
									background:-webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
									background:-webkit-linear-gradient(top, #f00, #00f);
									background:-moz-linear-gradient(top, #f00, #00f);
									background:-o-linear-gradient(top, #f00, #00f);
									background:linear-gradient(#f00, #00f);

/* 横方向 */
								div.sample {
									background:-webkit-gradient(linear, left top, right top, from(#f00), to(#00f));
									background:-webkit-linear-gradient(left, #f00, #00f);
									background:-moz-linear-gradient(left, #f00, #00f);
									background:-o-linear-gradient(left, #f00, #00f);
									background:linear-gradient(to right, #f00, #00f);
								}

/* 斜め方向 */
								div.sample {
									background:-webkit-gradient(linear, left top, right bottom, from(#f00), to(#00f));
									background:-webkit-linear-gradient(left top, #f00, #00f);
									background:-moz-linear-gradient(left top, #f00, #00f);
									background:-o-linear-gradient(left top, #f00, #00f);
									background:linear-gradient(to right bottom, #f00, #00f);
								}

/* 角度指定 */
								div.sample {
									background:-webkit-linear-gradient(60deg, #f00, #00f);
									background:-moz-linear-gradient(60deg, #f00, #00f);
									background:-o-linear-gradient(60deg, #f00, #00f);
									background:linear-gradient(60deg, #f00, #00f);
								}

方向

グラデーションポイントの追加

グラデーションの途中にポイントを追加して色を挿入することができます。
旧Webkit仕様ではcolor-stop関数を使用します。位置を省略した場合は、均等に配置されます（ただし、旧Webkit仕様でcolor-stop関数を使用している場合は、省略することができません）。

サンプルコードでは旧Webkit仕様は色の開始と終了位置にもcolor-stop関数を使用していますが、色の開始と終了位置については、from関数とto関数でも可能です。

構文

							background:linear-gradient(方向, 開始色 開始位置, 途中色 途中位置, 終了色 終了位置);
							旧Webkit仕様：
							background:-webkit-gradient(linear, 開始方向, 終了方向, color-stop(開始位置, 開始色), color-stop(途中位置, 途中色), color-stop(終了位置, 終了色));

サンプル

縦方向

横方向

斜め

CSS

/* 縦方向 位置指定なし */
								div.sample {
									background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f00), color-stop(0.5, #0f0), color-stop(1, #00f));
									background:-webkit-linear-gradient(top, #f00, #0f0, #00f);
									background:-moz-linear-gradient(top, #f00, #0f0, #00f);
									background:-o-linear-gradient(top, #f00, #0f0, #00f);
									background:linear-gradient(to bottom, #f00, #0f0, #00f);
								}

/* 縦方向 位置指定あり */
								div.sample {
									background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f00), color-stop(0.5, #0f0), color-stop(1, #00f));
									background:-webkit-linear-gradient(top, #f00 0, #0f0 50%, #00f 100%);
									background:-moz-linear-gradient(top, #f00 0, #0f0 50%, #00f 100%);
									background:-o-linear-gradient(top, #f00 0, #0f0 50%, #00f 100%);
									background:linear-gradient(to bottom, #f00 0, #0f0 50%, #00f 100%);
								}

/* 斜め方向 位置指定あり */
								div.sample {
									background:-webkit-gradient(linear, left top, right bottom, color-stop(0, #f00), color-stop(0.5, #0f0), color-stop(1, #00f));
									background:-webkit-linear-gradient(left top, #f00 0, #0f0 50%, #00f 100%);
									background:-moz-linear-gradient(left top, #f00 0, #0f0 50%, #00f 100%);
									background:-o-linear-gradient(left top, #f00 0, #0f0 50%, #00f 100%);
									background:linear-gradient(to right bottom, #f00 0, #0f0 50%, #00f 100%);
								}

グラデーションの複数指定

Multiple backgroundsとしての指定ですが、カンマ区切りで指定することで、複数のグラデーションを1つの要素で使用することができます。

CSS

線形グラデーション Linear gradient

線形グラデーションについて

構文

位置の省略

位置の指定あり

角度

サンプル

グラデーションポイントの追加

構文

サンプル

グラデーションの複数指定