linear-gradientはbackgroundプロパティなどの背景関連のプロパティの値に指定して、線形のグラデーションを表す関数です。
{プロパティ: linear-gradient (方向, 色 始点の位置, 色 終点の位置); }
関数の引数は、半角スペースとカンマ（,）で区切って指定します。
グラデーションの方向
グラデーションの方向は以下のように指定するか、degなどの単位をつけた数値で指定します。
| to top | 上方向 |
|---|---|
| to top right | 右上方向 |
| to right | 右方向 |
| to bottom right | 右下方向 |
| to bottom | 下方向 |
| to bottom left | 左下方向 |
| to left | 左方向 |
| to top left | 左上方向 |
degをつけた数値で指定する場合は、0degで下から上へ向かうグラデーションとなり、正の値を指定することで時計回りに方向が決まります。
グラデーションの色
色はグラデーションの始点と終点の色を指定します。
関連記事
『CSSの色の指定方法まとめ！RGBモデルやHSLモデル【CSS】』
グラデーションの開始位置と終了位置
グラデーションの始点と終点の位置を指定します。
各点の色に続けて、半角スペースで区切って記述します。
各点の位置は、%値もしくは単位つきの数値で指定し、負の値も指定することができます。
省略した場合は始点が0%、終点が100%となります。
途中点も指定可能
始点と終点だけでなく、途中点を指定して3色以上のグラデーションも表すことができます。
各点の位置を省略した場合は、色の数に合わせて均一に変化します。
右上方向（to right）に白から赤、途中色にオレンジを入れたグラデーションの例です。
線形グラデーションを繰り返し表示させる
repeating-linear-gradient関数を使って、線形グラデーションを繰り返し表示させることもできます。
{プロパティ: repeating-linear-gradient(方向, 色 始点の位置, 色 終点の位置);}
引数はlinear-gradient関数と同じです。
線形グラデーションのほかにも、円形グラデーションを表示させられる「radial-gradient関数」もあります。
Leave a Comment