備忘録的プログラミングリファレンス

linear-gradient()関数

 linear-gradient()関数は、2色以上の線形グラデーションを生成する関数です。<gradient>データ型であり、<image>データ型の派生です。

 linear-gradient()関数は<image>データ型に属します。そのために<image>データ型が使用できるプロパティのみで使えます。

背景にグラデーションを表示(Exampleを参照
background-image: linear-gradient(red 0% 30%, yellow 70% 100%);

 backgroundとlinear-gradient()関数の組み合わせでテキストにマーカーを引いたような装飾もできます。

マーカーのような装飾
span {
    background: linear-gradient(transparent 60%, #ff6 60%);
}

 円形グラデーションを表示するにはradial-gradient()関数を利用します。

関連プロパティ

 以下は関連するプロパティです。

プロパティ名概要
backgroundバックグランドプロパティの一括指定
background-attachmentスクロールによるバックグランドの表示位置
background-blend-mode複数の背景画像や配色を混ぜ合わせる
background-clipborder、paddingを領域に含めるか
background-colorCSSのColorの指定
background-image画像の挿入
background-origin繰り返し表示を開始する位置
background-position画像の配置位置
background-repeat画像の繰り返し(デフォルトは繰り返し)
background-size画像のサイズ
radial-gradient()円形グラデーション

構文(Syntax)

CSS

linear-gradient(direction, color end1, color end2,...)

DOM(JavaScript)

値の取得
(red, yellow)
値の設定
(red 0% 30%, yellow 70% 100%)

Example

 linear-gradient()関数の例です。この関数は、<image>データ型が使用できるプロパティのみで使えます。 関数による返り値がプロパティの値になります。

 ここでは背景に線形グラデーションを表示します。