CSSグラデーション生成ツール

① このツールの使い方

2つの色と方向・種類を選ぶと、そのままコピーして使えるCSSのグラデーションコードが生成されます。プレビューを見ながら色や方向を調整できるので、エディタとブラウザを行き来して確認する手間を省けます。

② 線形（linear-gradient）と円形（radial-gradient）の違い

線形グラデーションは指定した方向に向かって色が直線的に変化します。円形グラデーションは中心から外側に向かって放射状に色が変化するため、スポットライトのような表現や、ボタンの立体感を出したいときに向いています。用途に応じて使い分けるのが基本です。

③ 方向の指定方法

線形グラデーションの方向は、to right（左から右）のようなキーワードでも、45degのような角度指定でも書けます。キーワード指定は要素のサイズが変わっても常に同じ相対方向（例：右上から左下）を保つのに対し、角度指定は要素の縦横比によって見た目の向きが変わる点に違いがあります。

色の組み合わせに迷ったときは配色パレット生成ツールで相性の良い色を探すのもおすすめです。

④ 3色以上のグラデーションにしたい場合

このツールは2色間のグラデーションに対応していますが、CSSのlinear-gradient()・radial-gradient()はカンマ区切りで3色以上を指定することもできます。生成されたコードのカンマの間に色を追加し、必要であれば色 位置%の形式で色が変わる位置を指定すると、3色以上のグラデーションに拡張できます。

⑤ conic-gradient（円錐形グラデーション）との違い

CSSには線形・円形のほかに、中心を軸にして時計回りに色が変化するconic-gradient()もあります。円形グラデーションが中心から外側への「距離」で色が変わるのに対し、円錐形グラデーションは中心を軸にした「角度」で色が変わるのが特徴で、色相環そのものやパイチャート（円グラフ）のような見た目を作りたいときに使われます。このツールでは扱っていませんが、生成したコードのradial-gradientの部分をconic-gradientに書き換えるだけで、同じ色指定のまま試すこともできます。

⑥ 背景を敷き詰めたいときは repeating-gradient

ストライプ模様のように同じグラデーションを繰り返し敷き詰めたい場合は、linear-gradientの代わりにrepeating-linear-gradientを使います。書き方はほぼ同じですが、色の切り替え位置を%やpxで細かく指定すると、その範囲を1周期として繰り返してくれます。単色の背景に模様をつけたいだけで、画像ファイルを用意したくない場面で使うと、読み込みが軽く、拡大縮小してもぼやけない背景を作れます。

⑦ グラデーションはテキストにも使える

背景だけでなく、文字自体をグラデーションで彩色することもできます。backgroundにグラデーションを指定したうえで、background-clip: textとcolor: transparentを組み合わせると、文字の形にグラデーションを切り抜いて表示できます。見出しやロゴなど、目を引かせたい少量のテキストに使うと効果的ですが、本文のような長い文章に多用すると読みにくくなるため、使う範囲は絞るのがおすすめです。

⑧ 透明度を組み合わせるとオーバーレイ表現ができる

色に透明度を持たせた（rgba()やアルファ値付きのカラーコードを使った）グラデーションを画像の上に重ねると、画像の一部を暗くして文字を読みやすくする「オーバーレイ」表現が作れます。片方の色を完全透明にしておくと、画像の下半分だけをグラデーションで暗くする、といった演出も背景画像1枚とCSSだけで実現できます。

⑨ プレーンな単色より軽量に済むことが多い

画像ファイルでグラデーション背景を用意すると、画面サイズごとに複数の画像を用意する手間や読み込み時間がかかりますが、CSSのグラデーションはコードだけで完結するため、画像を1枚も使わずに済みます。画面の拡大縮小にも自動で追従するので、レスポンシブなデザインとの相性も良い方法です。

⑪ ブラウザのキャッシュにも注意

コードを貼り替えても見た目が変わらないときは、ブラウザ側にキャッシュが残っている可能性があります。強制リロード（WindowsはCtrl+Shift+R、MacはCmd+Shift+R）を試すと、最新のコードが反映されているかを正しく確認できます。

⑫ 見た目がおかしいと感じたときの確認ポイント

生成したCSSを貼り付けても反映されない場合、多くはbackground-color と background の指定が競合していることが原因です。同じ要素にbackground-colorとbackground（グラデーション）の両方を指定すると、後に書いたほうが優先されるため、意図した順番でCSSが読み込まれているかを確認してください。また、要素の高さが0になっているとグラデーション自体が見えないため、要素に十分な高さ・幅が設定されているかもあわせて確認してください。