【CSS】CSSでグラデーションを表現する方法

 関数linear-gradient()で指定できる

linear-gradient() 関数は、二つ以上の色の間で、グラデーションのある画像を生成します。次のようなHTMLとCSSを準備するだけでＯＫです。

<div class="box"></div>

.box{
  width:100%;
  height:100px
  background: liner-gradient(#f9dbf9,#d5eef2)
}

グラデーションの角度を指定する

〇〇〇degを使えば、グラデーションを傾けることも可能です。下は45度です。

.box{
  width:100%;
  height:100px
  background: liner-gradient(45deg,#f9dbf9,#d5eef2)
}

下は90度傾けています（つまり横向き）。

.box{
  width:100%;
  height:100px
  background: liner-gradient(90deg,#f9dbf9,#d5eef2)
}

複数の色を指定する

2色だけに限らず、多くの色を加えることができます。