CSSグラデーション生成：美しいグラデーションを作成 | 無料

A 2色を選び、タイプと角度を設定してCSSをコピー。

A はい。

A CSSグラデーションがブランドのビジュアルアイデンティティと完全に一致するようにするには、カスタムカラー入力フィールドを使用してください。特定のブランドの16進数カラーコード（例：#RRGGBB）をカラーセレクターに貼り付けるだけです。これにより、正確なブランドカラーを使ったグラデーションを生成でき、すべてのウェブ要素で一貫性を保つことができます。必要に応じて角度を調整し、さらにカラーストップを追加して、目的の効果を得てください。

A 複数の色を持つCSSグラデーションをデザインするには、既存のカラーセレクターの間または隣にある「色を追加」ボタン、または同様のインジケーターをクリックします。これにより、追加のカラーストップが導入されます。その後、このストップに新しいカスタムHEXカラーを選択し、グラデーションバーに沿ってその位置を調整することで、複数の色のブレンドを希望するスムーズな、または abrupt なトランジションで実現できます。

A 線形グラデーションは、直線（水平、垂直、または斜め）に流れます。角度スライダーで方向を制御でき、例えば90度に設定すると垂直のフェードになります。放射状グラデーションは、中心点から外側に広がり、円形または楕円形の効果を生み出します。このツールでは円形以外の形状を直接制御できませんが、中心位置を選択することは可能です。

A このツールはChrome、Firefox、Safari、Edgeで動作する標準CSSを生成します。Internet Explorer 9以下はグラデーションを表示できませんが、世界のトラフィックの1%未満です。古いブラウザ向けには、CSSのグラデーションプロパティの前にベタの背景色をフォールバックとして追加してください。これでグラデーション非対応時も色が表示されます。簡単なテスト方法：コードをモダンブラウザの開発者ツールに貼り付けて確認しましょう。

A 色の変化がスムーズでなく縞模様になる現象は、グラデーションの幅に対してカラーストップの数が足りないときに起こります。ヒーローセクション全体に使うなら、2色の中間に3つ目のカラーストップを追加してみてください。1920ピクセル以上の大きな背景では、background-attachment: fixedを設定すると視覚的な縞を減らせます。このツールは綺麗なCSSを生成しますが、ブラウザのレンダリングには限界があります。明るさが近い色を選ぶと効果的です。

A グラデーションはシステムのハイコントラスト設定に従いますが、ツール内でシミュレーションはできません。コントラスト問題は、パステルイエローと薄ピンクのように明るさが近い色同士で起こりがちです。簡単なチェック方法: 両方のHexコードをHSLに変換し、L値の差が30以上あるか確認してください。ヒーローセクションでは、WindowsのハイコントラストモードやAxeのようなブラウザ拡張機能でテストすることをお勧めします。12種類のプリセットはアクセシビリティを考慮して選ばれていますが、カスタム色は自己責任です。

A 現バージョンには保存機能がありません。代わりに、生成されたCSSをテキストファイルやCodePenのスニペット、ブラウザの開発者ツールに保存してください。多くのデザイナーはプロジェクトに「gradients.css」ファイルを作り、お気に入りを5～10個ストックしています。一度10秒あれば準備完了、後はコピペするだけです。