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

linear-gradient() ファンクション

　linear-gradient() ファンクションは、２色以上の線形グラデーションを生成する 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 などのプロパティで使えます。

ページ内 Index

構文(Syntax)

CSS

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

　第１引数のグラデーションをかける方向を指定します。単位を deg で指定するか、以下のようにワードで指定します。

キーワード方向
to bottom上 から 下
to top下 から 上
to right左 から 右
to left右 から 左
to right bottom左上 から 右下
to left bottom右上 から 左下

　単位 deg で指定する場合は以下のようにします。

単位 deg で指定
linear-gradient(90deg, blue, yellow );
表示例

　

Example

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

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

JavaScript

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

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

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

関連する CSS

　 <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 プロパティ

関連（Related）