CSS3でグラデーションを実装する方法(linear-gradient、radial-gradient)

Web制作

2016年07月20日

CSS3プロパティの連載記事

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);

向きを指定した場合(deg)

左下から右上に向かって、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などの画像編集ソフトを使うことなくデザインできるのでとても便利です。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。