CSS3のプロパティについて解説する連載記事です。今回は、線形グラデーションが表現できるlinear-gradientと、円形グラデーションが実装できるradial-gradientを取り上げます。
linear-gradientの指定方法
linear-gradientを使うと、線形のグラデーションが実装できます。グラデーションをかける方向（向き）と色を指定して、下のように記述します。
background: linear-gradient(グラデーションの向き, 開始色, 終了色);
「グラデーションの向き」は、topやleft、bottomなどの値で指定するか、角度（deg）を使うこともできます。「開始色」と「終了色」の間に、途中の色を複数指定することも可能です。
border-radiusの具体例
linear-gradientの具体例について見ていきましょう。
向きを指定しない場合
background: linear-gradient(white, blue);
画像の向きを省略した場合、デフォルトでtopが指定されます。上から下に向かって、グラデーションがかかります。
向きを指定した場合
background: linear-gradient(to right, white, blue);
左から右に向かって、グラデーションがかかっています。
degを使った場合も見ておきましょう。
background: linear-gradient(45deg, white, blue);
左下から右上に向かって、45度のグラデーションが表示されます。
途中色を指定した場合
background: linear-gradient(to right, white, gray, blue);
途中色を指定してみましょう。whiteとblueの間に、grayを追加してあります。
radial-gradientの指定方法
linear-gradientは線形のグラデーションでしたが、radial-gradientは円形のグラデーションを表現します。
background: radial-gradient(グラデーションの向き, 形状・サイズ, 開始色, 終了色);
「グラデーションの向き」は、linear-gradientと同様ですね。こちらでは開始点を指定します。「形状」は下の選択肢から選択します。
- circle
- ellipse（デフォルト）
「サイズ」は下の6つから選びます。
- closest-side
- closest-corner
- farthest-side
- farthest-corner
- contain
- cover（デフォルト）
linear-gradientと同じように、開始色と終了色の間に途中の色を追加することも可能です。
radial-gradientの具体例
radial-gradientの具体例です。
開始点を指定しない場合
background: radial-gradient(white, blue);
向きを指定しない場合は、デフォルトのcenterが指定されます。
開始点を指定した場合
background: -webkit-radial-gradient(left bottom, white, blue);
左下を起点として、グラデーションが作成されています。
形状とサイズを指定した場合
background: -webkit-radial-gradient(circle, white, blue);
形状にcircleを指定した場合です。デフォルトのellipseは楕円でしたが、グラデーションが正円になっていることがわかります。
background: -webkit-radial-gradient(circle contain, white, blue);
さらにサイズも指定した場合がこちら。指定した範囲にグラデーションを収める、containで描画しています。
あとがき
CSS3を使ってグラデーションを描く方法について解説しました。Photoshopなどの画像編集ソフトを使うことなくデザインできるのでとても便利です。