背景を二色で塗り分けたい（めちゃめちゃ楽しいlinear-gradient）
やりたいこと
span とか div とか増やさずに、１つの要素をあるところで二色に塗り分けたい、ということがありました。
調べてみたら background: linear-gradient という指定の仕方があるという。
やり方も簡単そうなので、こちらで実装することに。
とりあえずブラウザ上でやってみたら・・・
これめっちゃ楽しい！！！！ （個人の感想です）
以前仕事でパワーポイントで資料を作りまくっていた時、カテゴリ分けてマッピングした資料などに、色使いすぎた果てにグラデーションとかまで使っていたことを思い出しました。 オリンピックカラーとかも結構好きで、インフルエンザウィルスとかめっちゃデザインいいよな、と思ったことも。（3色以上、多いときは7色くらい使われて描写されていることが多いのです）
なのでたまたま私のツボに入っただけだと思いますが、ブラウザでパッと描写された時の鮮やかさはなかなか壮観です。
ぜひみなさんも暇な時に（？）やってみて楽しんでみてください。
linear-gradient使い方
使い方としては、
background: linear-gradient( <グラーデションをかけていく方向>, <色> <スタートからの距離>, <色> <１つ目の色の分岐からの距離>, ...);
という感じです。ちょっとわかりにくいかもですが、以下の例を見ればかなり簡単だとわかると思います。そして何より、一度ブラウザで試してみると、もう一目瞭然にわかります。 やってみるしかないですよ！
いくつか例をあげてみます！
【CSS】
background: linear-gradient(180deg, blue 0%, yellow 50%, green 100%)
色のチョイスは個人の好みですが、あくまでも背景色としてなら、案外そこまで派手に見えません！ この前に白のカードやパネルが並ぶと思ってみてみてください。
【CSS】
background: linear-gradient(240deg, lightpink 0%, lightpink 31%, lightblue 50%, lightgreen 70%,lightgreen 100%);
斜めやってみようとしてやってみたので、色ちょっとやりすぎですかねw このように１つ目のパラメーターの度を変えることで、グラデーションがかかっていく方向を決めることができます。
- 180deg ：上から下
- 90deg：下から上
to right,to bottom,to leftといった指定の仕方もできるようです
二色での塗り分け
今回は、もともと背景色を二色で塗り分ける方法を探していました。 これは、色の分岐点を増やすことで、実装できました。
【CSS】
background: linear-gradient(180deg, #f9f6f5 0%,#f9f6f5 30%, #FFDB12 30%, #FFDB12 100%)
いや〜これは楽しい。 思いもよらず、テンション上がってしまいました。二色塗り分けはともかく、グラデーションはなかなか使いどころが難しそうではありますが、良いデザインではなかなかに生きてくる（しかも楽しい）技術だと思いました。
百聞は一見にしかずです。まだみたことない方は、ぜひやってみてください。
参考記事： 背景色を２色で分割表示する方法 - Qiita
