CSS Reference

linear-gradient()

線形のグラデーションを表す

linear-gradient() 関数は、画像のデータ型で値を指定できるプロパティにおいて、線形のグラデーションを表します。

線形グラデーションを繰り返して表示したい場合は、repeating-linear-gradient() 関数を使用します。

linear-gradient() 関数の基本的な構文は以下の通りです。

linear-gradient() = linear-gradient(
  [ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

<angle>

角度を指定することで、グラデーション軸を指定した角度だけ傾けます。

<angle> と <side-or-corner>（後述）は、どちらか片方のみの指定が可能です。

<side-or-corner> における to top が 0deg、to bottom が 180deg、to left が 270deg、to right が 90deg に相当します。

<side-or-corner>

グラデーション軸の開始点の位置を指定します。to に続けて center、top、left、bottom、right のキーワード値、もしくはその組み合わせ（to top left など）で指定します。省略された場合、to bottom として扱われます。

カラーストップの配置（Placing Color Stops）

色のデータ型でグラデーションの色をカンマ（,）区切りで指定します。色と終点の位置を空白文字で区切ってセットで指定することもできます。この場合、どの位置でどの色に変化するか、指定することができます。

色のみを指定し、終点の位置を省略した場合は、色の数に合わせて均一に変化します。

グラデーションの例

background-image: linear-gradient(45deg, red, blue);

background-image: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);

background-image: linear-gradient(135deg, orange 60%, cyan);

主要ブラウザの対応

IE11 ○
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome