【WEBデザイン】を美しくする | グラデーション(linear-gradient())

【WEBデザイン】を美しくする | グラデーション

linear-gradient()

　CSSのbackgroundプロパティに使用することのできる関数です。

使い方

　background:linear-gradient(グラデーションの方向,開始色,途中色,終了色)

各指定値はカンマごとに入力します。

グラデーションの方向

　向きによる指定

• 右に向かって変わる：to right
   
• 上に向かって変わる：to top
   
• 左に向かって変わる：to left
   
• 下に向かって変わる：to bottom
   

　角度による指定

• 45度に向かって変わる：45deg
   
• 160度に向かって変わる：160deg
   
• 275度に向かって変わる：275deg
  
   

途中色

　開始色と終了色の間に指定する色は省略も可能です。その場合は開始と終了の2色になります。途中色をうまく使用することできれいなグラデーションにすることができます。

グラデーションをつくる

方向：deg  /   途中色の数 1 2 3 4 5 6 7 8 9 10 /  開始色(rgb型)：

• 赤：
• 緑：
• 青：

 

※開始色をもとにrgb値を大きくしてグラデーションをつくります。終了色は白色固定です。

プロパティとその値コピー

background:linear-gradient(90deg,#64c80a,#ffffff);