CSS

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

みいと

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

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

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

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

方向の指定

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

角度の指定

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

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

0deg
90deg
180deg
270deg

キーワードの指定

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

to top
to right
to bottom
to left
キーワードは「to top left」のように組み合わせて、右下から左上のようなグラデーション設定もできます。
to top left

色の指定

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

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

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

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

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

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

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

まとめ

  • linear-gradientを使うと直線状のグラデーションを設定できる
  • 方向の指定には、角度、またはキーワードが指定できる
  • 方向は省略可能(省略した場合は to bottom)
  • 色は開始色と終了色を指定する
  • 開始色と終了色の間には、途中の色を指定できる
  • 色の後には半角スペースで区切って、その色になる位置を指定できる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました