Css Creat Background Gradation

CSS3でツートンカラーの背景を作る。

一番最初に掲載させていただいてた、「CSS3でグラデーションを作る。」でも少しだけ掲載した記事になるのですが、ツートンカラーが中々可愛いので、専用ページとして記載します。

body{
  background: linear-gradient(#99cc00 50%, #ffffcc 50%);
   }

カラーストップの設定にて、各色味の占める割合を50％・50％と、同等の割合にします。同じ割合にすると、色が交わる接点(境目)が同じ場所になる為、グラデーションはなくなり、はっきりとしたツートンカラーの背景に変身します。 ツートンカラー背景のパターンを3つご用意！好きなパターンをコピペしてご利用ください。

【1,子供っぽいポップカラー】
body{
   background: linear-gradient(#ff6666 50%, #6699ff 50%);
   }

【2,元気いっぱいのカラー】
body{
    background: linear-gradient(#330099 50%, #ff6600 50%);
   }

【3,接点グラデーション3色カラー】
body{
   background: linear-gradient(#99cc00 20%, #ffffcc 30%, #339933 30%);
   }