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

linear-gradient()関数

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

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

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

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

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

 linear-gradient()関数は CSS の <image> データ型を扱います。 そのために <image> データ型が使用できる、background-image などのプロパティで使えます。

  <gradient> データ型を扱う CSS の関数には以下があります。

関連 CSS 関数

 以下は、<gradient> データ型に関連する CSS 関数です。

関数名概要
linear-gradient()線形グラデーション
radial-gradient円形の放射状グラデーション
linear-repeat縞模様のパターングラデーション
radial-repeat縞模様で放射状のパターングラデーション
conic-gradient扇形のグラデーション

関連プロパティ

 以下は CSS の <image> データ型に関連するプロパティです。

プロパティ名概要
background-imageバックグランドプロパティの一括指定
list-style-image<ul> リストのマーカー
border-image-source画像を利用した border
cursorカーソル
content プロパティ疑似エレメント ::after、::before で利用する content プロパティ

構文(Syntax)

CSS

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

DOM(JavaScript)

 JavaScript では、HTMLElement.style.background プロパティに linear-gradient() 関数を設定する方法があります。 ベンダープレフィックス -webkit-gradient() 関数による設定である必要があるかもしれません。

 または、以下のように HTMLElement.style に 。background: を利用した値を指定することで表示できるようです。

background:を使用
HTMLElement.style = "background:linear-gradient(lime 0% 30%, green 70% 100%)";

Example

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

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