【linear-gradient】直線状のグラデーション

linear-gradientで直線状のグラデーションを設定する

CSSで画像が指定可能な場所では、url()の代わりにlinear-gradient()で、直線状のグラデーションを設定することができます。

基本的な設定方法は、下記の形式になっています。

background: linear-gradient(方向, 開始色, 終了色);

方向の指定

方向は角度、またはキーワードで指定します。
方向は省略可能で、デフォルト値は「to bottom(上から下)」です。

角度の指定

角度は、数値に「deg」を付けて指定します。

指定する角度によって、下記のようなグラデーションになります。

キーワードの指定

キーワードは、toに続けて「left」「right」「top」「bottom」のキーワードを指定します。

色の指定

色は背景色などの指定と同じく、16進数やRGBなどで指定します。

また、開始色と終了色は、その色になる位置を指定することもできます。

位置は、色の指定の後に半角スペースで区切って、「単位を付けた実数」または「パーセンテージ」で指定します。

さらに開始色と終了色の間には、途中の色をいくつでも設定可能です。

linear-gradient(to top, blue 30%, white 60%, blue 100%)

直線状のグラデーションのまとめ

今回は、直線状のグラデーションの設定についてまとめました。
意図したとおりにグラデーション設定ができれば、画像に頼ることも少し減りそうです。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。