[CSS] 背景色をグラデーションにする

2019年3月17日2019年3月22日

背景色をグラデーションにするには、linear-gradientを使用します。

グラデーションサンプル

以下、グラデーションのサンプルです。
グラデーションの方向や割合、色を指定することができます。

「上 → 下」へグラデーションする

例）上（white）→下（blue）

「上 → 中 → 下」でグラデーションする

例）上（white）→中（blue）→下（white）

「上 → 中１ → 中２ → 下」でグラデーションする

例）上（white）→中１（blue）→中２（blue）→下（white）

「左 → 右」でグラデーションする

例）左（white）→右（blue）

「左上 → 右下」でグラデーションする

例）左上（white）→右下（blue）

「左下上 → 右上」でグラデーションする

例）左下上（white）→右上（blue）

メモ

• 主要なカラーネームは以下ページをご覧ください。
  [CSS] 主要色一覧