【簡単】CSSで背景にグラデーションを実装する【サンプルコードつき】

この記事では、要素の背景にグラデーションを実装する方法を説明します。

グラデーションの形は2種類あります。

線形に変化していくもの
円形に変化していくもの

サンプルは以下のとおりです。

See the Pen Gradient1 by gsg0222 (@gsg0222) on CodePen.

See the Pen Gradient2 by gsg0222 (@gsg0222) on CodePen.

それでは順番に説明していきましょう。

線形のグラデーション
1. 第１引数、向き
2. 第２引数と第３引数、色の指定
円形のグラデーション
1. 第１引数と第２引数、色の指定
2. 複雑な円形のグラデーション
対応しているブラウザ
グラデーションを使って表示にアクセントをつけよう

線形のグラデーション

線形のグラデーションを背景に指定するためには、background-imageにlinear-gradientを指定します。

（他のページではbackgroundに指定しているところもありますが、このページでは明示的にどこに指名しているのか示すため、background-imageを利用しています）

linear-gradientは特殊な画像なのだと考えれば、理解しやすいでしょう。

linear-gradientの指定の仕方は、

linear-gradient(向き, 開始色, 終了色)

です。もう一度サンプルを見てみましょう。

See the Pen Gradient1 by gsg0222 (@gsg0222) on CodePen.

第１引数、向き

linear-gradientの最初の引数は「to right」で、これは右向きに色を変化させることを示しています。

一番左を開始色、一番右を終了色とせよという指示です。

「to 向き」で指定する方法は、以下のようになります。

to right	左から右	90deg
to bottom	上から下	180deg
to left	右から左	270deg
to top	下から上	0deg
to bottom right	左上から右下	135deg
to top right	左下から右上	45deg

角度の指定方法サンプル

縦横だけでなく、斜めへの指定も可能です。

また、上の表にも書いてありますが、数値での指定も可能になっています。

数値での指定の場合、下から上(to top)が0degです。

後は表のとおり、左から右が90deg、上から下が180degといった具合になります。

第２引数と第３引数、色の指定

第２引数と第３引数は、開始色と終了色の指定です。

サンプルでは２色で指定していますが、より複雑に３色以上を指定したりそれぞれの色の幅を指定したりもできます。

このページでは難しくなりすぎるので説明しません。

MDN web docsでサンプルコードを眺めて見るのもいいでしょう。

CSS グラデーションの使用

円形のグラデーション

円形のグラデーションを背景に指定するためには、background-imageにradial-gradientを指定します。

linear-gradientと同じく、こちらも画像扱いです。

See the Pen Gradient2 by gsg0222 (@gsg0222) on CodePen.

第１引数と第２引数、色の指定

第１引数で指定するのは中央の色、第２引数は一番外側の色になります。

サンプルのような単純なグラデーションだと、指定するのはこの２つだけです。

複雑な円形のグラデーション

より複雑なグラデーションも実装可能です。

例えば下記のサンプルは、グラデーションの中心を上から40px、左から40pxの場所に指定しています。

See the Pen Gradient3 at syntax by gsg0222 (@gsg0222) on CodePen.

第１引数の「farthest-corner at 40px 40px」が、「中心を中心を上から40px、左から40pxにして、一番遠い隅までグラデーションをかける」という指定になります。

第２と第３引数は色の指定です。

ただ、ちょっとややこしいしあまり使わない気もするので、こんなことも出来るんだというサンプルとしての提示にとどめておきたいと思います。

詳しく知りたい方はMDN web docsを確認してください。

radial-gradient()

対応しているブラウザ

linear-gradientとradial-gradientは比較的新しく定義されたCSSです。（とはいえ、既に１０年は立っていますが）

なので、古いブラウザでは対応していないこともあります。

しかし、caniuse.comで確認したところ、2020年4月時点でlinear-gradientは94.23％、radial-gradientも94.23％のブラウザが対応していました。

実用上ほとんど問題にならないかと思います。

グラデーションを使って表示にアクセントをつけよう

linear-gradientとradial-gradientを使うと、比較的単純なCSSでグラデーションを作ることができます。

より複雑なことも出来るのですが、このページでは説明しません。

勉強熱心な方は、以下のページにサンプルコードとともに説明がのっているので、読みに行ってみるのも良いかと思います。

CSS グラデーションの使用

radial-gradient()