ちょっとディープな生物の世界

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

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

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

<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色だけに限らず、多くの色を加えることができます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です