linear-gradient構文の仕組み
CSSのlinear-gradient()関数は、方向(角度または「to right」のようなキーワード)に続けて、カンマ区切りの色リスト(それぞれにパーセンテージの位置指定を付けられる)を受け取ります。ブラウザはその方向に沿って隣り合う色同士を滑らかにブレンドするため、色の数を増やすほど単純な2色のフェードではなく、より複雑な多段階のグラデーションになります。
グラデーションと単色背景の違い
グラデーション背景は単色にはない視覚的な奥行きや光の方向性の印象を与えられるため、ヒーローセクションやボタン、アプリアイコンなどでよく使われます。一方で色の組み合わせや角度の選び方を誤ると濁った印象や古臭い印象になりやすいため、コードを本番に反映する前にライブプレビューで確認する価値は、単色を選ぶときよりずっと大きいと言えます。
よくある質問
生成されたCSSは主要なブラウザすべてで動きますか?
はい。linear-gradient()は長年にわたり主要ブラウザすべてで標準サポートされているプレフィックス不要のCSSなので、生成されたコードは現行の主要ブラウザであれば追加の対応なしにそのまま動作します。
グラデーションジェネレーターは放射状(radial)グラデーションにも使えますか?
多くのジェネレーターは最も一般的なlinear-gradientに特化していますが、「色の位置を経路に沿ってブレンドする」という基本的な考え方は、中心点から外側へブレンドする別のCSS関数radial-gradient()にも共通して当てはまります。