CSSでグラデーションを使う方法!色を2色に分ける方法も紹介

今回はCSSだけでグラデーションをかける方法を紹介します。

 

CSSでグラデーションを使う方法

CSSでグラデーションを使うにはlinear-gradient()プロパティを使用します。

書き方なこんな感じ↓

background:linear-gradient(方向角度,色 位置,色 位置,...);

 

例えば右から左に向かって青から赤にグラデーションをかけたいときは以下のような書き方になります。

background:linear-gradient(to right,blue,red);

 

 

to rightはグラデーションの方向を決めるキーワードです。

方向の指定にはキーワードや数字を使うことができます。簡単にまとめるとこんな感じ。

・方向角度
グラデーションの向きです。
0deg    ↑   (下から上へ)
90deg   →   (左から右へ)
180deg   ↓   (上から下へ)
270deg   ←  (右から左へ)

角度ではなく以下のキーワードで指定することも可能です。
to top   =  0deg
to right  =  90deg
to bottom = 180deg
to left   = 270deg

デフォルトの0度は下から上へのグラデーションになっています。

 

色をきっぱり2色に分ける方法

グラデーションをかけずに色を2色できっぱり分けたい場合は以下のように指定します。

background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);

 

0%〜50%までが青、50%〜100%までが赤となり、グラデーションをさせずに色を分けることができます。

応用すればストライプ模様や三色の国旗を再現することもできそうです。