Webサイトで見かける背景色がグラデーションになっているおしゃれなデザインを作ってみたいと思ったことはありませんか？
CSSを使用したグラデーションは、Photoshop等で画像を作る手間もなく、拡大しても画像が荒れず見栄えが良く、PCだけでなくスマートフォンやタブレットで表示した時も美しい表示が可能です。
この記事では、HTMLとCSSだけで簡単にグラデーションを生成する方法を初心者にもわかりやすく解説していきます。
では、早速やってみましょう！
目次
CSSでグラデーションを記述する基本的なコード
CSSグラデーションは、線形・円形・扇形から選択して、方向や角度、開始位置を指定することができ、多数の色が組み合わせられるため、鮮やかな美しい色のグラデーションを生成できます。
さらに、透過させて画像と合成したり、グラデーション同士を重ね合わせたりすることで、より複雑な表現をすることも可能です。
CSSで背景にグラデーションをかけるには、
CSSでグラデーションを記述する基本的なコードは以下の３種類です。
- 線形グラデーション background:linear-gradient()
- 円形グラデーション background:radial-gradient()
- 扇形グラデーション background:conic-gradient()
扇形グラデーションは、使用してる実例もあまり見つけられず、使われる機会が少なそうなので、線型と円形のグラデーションのふたつに絞って、詳しく見ていくことにします。
linear-gradient：線形グラデーション
はじめに、一定の方向に徐々に変化していく最も基本的なグラデーションを作ってみましょう！
2色のグラデーション
「開始の色」と「終了の色」」の2色を指定するだけでグラデーションを表現できます。
※背景色をライトイエローに指定して、その上にグラデーションを乗せています。
色を２つ指定するだけで、線形のグラデーションを作ることができます。
上から下へ直線的にグラデーションします。
線形グラデーション 向きの設定
では次に、グラデーションの向きを変更してみましょう！！
向きを変えたいときは、色の前に方向の値を指定します
グラデーションの向きは、方向（to right，to top等）か角度（deg）で指示します。
角度は、時計回りで表します。マイナス（－）の表記もできます。
線形グラデーション 方向と角度の値
複数の色を使った線形グラデーション
右に向かって、aquamarine～royalblue～hotpink～cornsilkへと４色直線的にグラデーションしていきます。
色は、何色でも増やせますが、あまり増やすと色彩が濁って美しくなくなってしまうので、抑えめにしたほうが良さそうです。最近の流行りは３〜４色といったところでしょうか？
２色でグラデーションさせるより、格段に美しくなります。
線形グラデーションを透過させる
次に、徐々に透過していくグラデーションをつくってみましょう！
色の指定に
このような透過グラデーションを画像の上に重ねたり、テキストの背景に使用することで、よりニュアンスを豊かにしたり、文字を見やすく読みやすくしたりすることが可能になります。
参考：線形グラデーション リファレンス
https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient
radial-gradient：円形グラデーション
次に、円形グラデーションを作っていきましょう！放射グラデーションとも呼ばれます。
中心から一番離れた端に向かって円形に色が移り変わっていくグラデーションです。
線形グラデーションと同様に、2色を指定するだけで円形のグラデーションを描くことができます。
細かい設定をするには、色の前に＜円の形・大きさ・中心の位置＞を指定します。
円の形状、大きさ、中心の設定
円の形状は楕円形と正円のふたつがあります。デフォルトは楕円です。
正円にしたいときは、最初の値にcircleと記述します。
circle・・・正円
ellipse・・・楕円（※初期値）
大きさの指定
グラデーションの終了位置を指定できます。
- closest-side・・・一番近い辺でグラデーションが終了
- farthest-side・・・一番遠い辺でグラデーションが終了
- closest-corner・・・最も近い角でグラデーションが終了
- farthest-corner・・・最も遠い角でグラデーションが終了（※初期値）
円形グラデーションの中心の設定
中心の指定
グラデーションの中心の位置を指定することができます。
指定しなかった場合の、既定値は centerです。
例えば、色の前に(at right top)を指定すると、右上の角がグラデーションの中心になります。
(30% 60%)と指定すると、左から30％で上から60％の位置がグラデーションの中心になります。
複数色の円形グラデーションと透過
複数のカラーのグラデーションと透過のグラデーションを見てみましょう！
線形のグラデーションと同じように、色を複数指定するだけです。
これで色々な色の組み合わせのグラデーションを生成できます。
透過させるには、rgbaで1色づつに透明度を指定するか、transparentを指定します。
画像と重ねたり、テキストやロゴを乗せると素敵な効果がありそうですね。
円形グラデーション リファレンス
https://developer.mozilla.org/ja/docs/Web/CSS/gradient/radial-gradient
以上、線形と円形のグラデーションのCSSコードを解説してきました。
好みのグラデーションを作るためには、コードを書いてブラウザで確認という作業を何度も行ったり来たりする必要があります。結構手間がかかる上リアルタイムで確認ができないため、なかなか難しいと思います。
そこで、もっと感覚的に簡単にCSSグラデーションを生成する方法もご紹介しておきます。
ジェネレーターを使う方法です。
グラデーションのCSSコードを自動生成してくれるジェネレーター
- grabient
https://www.grabient.com/ - mesher
https://csshero.org/mesher/ - CSS グラデーション ジェネレーター
https://front-end-tools.com/generategradient/
見た目で確認しながら好みのグラデーションを作れて、CSSコードもコピペで使うことができます。とても便利ですね。
以上、CSSでグラデーションコードを書く方法とジェネレーターについて解説してきました。Webサイトをおしゃれに彩ることができるCSSグラデーションを取り入れるとデザインの幅が広がります。是非、活用してみてください。
