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

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秒あれば準備完了、後はコピペするだけです。

A 可能ですが、このジェネレーターはアニメーションコードを出力しません。生成されるのは静的なbackground-imageプロパティです。アニメーションさせるには、@keyframesルールでbackground-positionを動かすか、色の変化を時間経過で指定します。実践的なコツ：グラデーション背景を要素の3倍の幅に設定し、background-positionを0%から100%にアニメーションさせる。滑らかな色の流れが作れて、ローディングスピナーやヒーローセクションに最適です。

A 角度スライダーを90度に動かすと、グラデーションが左右から上下に変わります。180度で完全に反転します。斜め効果には45度か135度を試してみてください。ヒーローセクションでよく使われる角度です。プレビューはリアルタイムで更新されるので、すぐに変化を確認できます。色のバランスを変えたい場合以外は、カラーストップをいじる必要はありません。

A いいえ、このツールはCSSコードのみを出力します。モックアップ用には、プレビューのスクリーンショットを撮るか、カラーコードをデザインツールにコピーしてください。FigmaやSketchはCSSグラデーションをネイティブに受け付けます。ラスター画像が必要な場合は、アングルを180度に設定し、OSのスクリーンショット機能を200%ズームで使ってください。2倍サイズのくっきりしたUIアセットが取れます。ブラウザとデザインソフトの間で色は正確に一致するので、モックアップの忠実度は保たれます。

A いいえ、このツールはbackground-imageプロパティ全体のみを出力します。ただし手動で短縮できます。linear-gradientの後の括弧内を切り取り、`background: linear-gradient(...)`として貼り付けてください。1ルールあたり約30文字節約できます。素早いモックアップなら、完全なスニペットをCSSからJSONへの変換ツールに貼る人もいます。実践的なコツ：完全版を残しましょう。読みやすく、デバッグも簡単です。短縮形はバイトを節約、長形は悩みを節約します。