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

CSSでは3種類のグラデーションを使用できます。それぞれの特徴を理解して、デザインに活用しましょう。

• linear-gradient（線形）：指定した角度に沿って色が直線的に変化します。最も一般的に使われるタイプで、ヘッダー背景やボタンのデザインに適しています。角度はdeg単位で指定し、0degは下から上、90degは左から右への方向です。
• radial-gradient（放射状）：中心点から外側に向かって色が変化します。円形（circle）と楕円形（ellipse）の2種類の形状を選べます。スポットライト効果やバッジの背景に効果的です。
• conic-gradient（円錐）：中心点を軸に色が回転するように変化します。パイチャートやカラーホイールの作成に利用できます。比較的新しいCSS機能ですが、主要なモダンブラウザでサポートされています。

このツールでは、これら3種類すべてをプレビューしながら、2〜12色のカラーストップと0〜100%の整数位置を調整できます。

美しいグラデーションを作るためのポイントを紹介します。

• 色数は2〜3色が基本：多くの色を使いすぎると散漫な印象になります。まずは2色から始め、必要に応じて中間色を追加しましょう。
• 類似色を使う：色相環で近い色同士のグラデーションは自然で美しい仕上がりになります。例えば青→水色、オレンジ→黄色など。
• 彩度と明度のバランス：同じ彩度・明度帯の色を組み合わせると統一感が生まれます。極端に異なる彩度の色を混ぜると濁って見えることがあります。
• カラーストップの位置調整：デフォルトの均等配置だけでなく、ストップ位置をずらすことで、色の変化に緩急をつけられます。

プリセットを参考にしながら、自分好みのグラデーションを見つけてみてください。

CSSグラデーションを使用する際のパフォーマンスとアクセシビリティについて知っておくべきポイントです。

• 別画像の通信が不要：CSSグラデーションはブラウザが描画するため、背景用画像ファイルを別途取得する必要がありません。一方、描画コストは端末・面積・複雑さによって変わります。
• 解像度に依存しない：CSSとして要素の寸法に合わせて描画されるため、固定解像度のビットマップ画像のような拡大時のピクセル化を避けられます。
• テキストの可読性：グラデーション上にテキストを配置する場合は、文字が重なる全域でコントラストを確認しましょう。WCAG 2.2 AAでは通常テキスト4.5:1以上、大きなテキスト3:1以上が基準です。
• アニメーションの注意：広い範囲や複雑なグラデーションのアニメーションは、代表的な端末で描画性能と動きの設定を確認してください。