CSSの線形グラデーション

CSSで放射状および線形のグラデーションを簡単に定義できるようになりました。 別のソフトウェアで画像を作成する必要はもうありません。 これらは引き続きブラウザの内部で生成された画像であるため、backgroundプロパティまたは要素で定義する必要があります。また、方向と色の停止に十分な柔軟性があります。

ここでは、線形勾配を定義するための構文について説明します。 放射状の勾配については、この投稿を参照してください。

/* Simplest Case */
.box {
  background: linear-gradient(black, white);
}

/* Defining a direction and adding a 3rd color stop */
.box {
 background: linear-gradient(to top, #211533, #211533,
             #3e275f);
}

/* Direction in degrees instead */
.box {
 background: linear-gradient(135deg, #211533, #211533,
             #3e275f);
}

/* Control over the position of the color stops */
.box {
  background: linear-gradient(135deg, #211533 20%,
              #211533 40%, #3e275f);
}

方向

線形グラデーションの方向を度単位で定義するか、次のキーワードのいずれかを使用して定義できます：上下、上、右、左、左上、右上、左下、右下。

グラデーションをサポートしていないブラウザのデフォルトの色

古いブロワーがフォールバックするデフォルトのベースカラーを定義することをお勧めします。

.box {
 background: #211533;
 background: linear-gradient(to top, #211533, #211533, #3e275f);
}

ブラウザのサポート

css-gradientsを使用できますか？ caniuse.comの主要なブラウザーでのcss-gradients機能のサポートに関するデータ。