CSS グラデーションジェネレーター

できること

CSS グラデーションジェネレーターでは、見た目を確かめながらグラデーションを作り、完成した CSS をコピーできます。線形・放射・円錐のいずれかを選び、カラーストップを好きなだけ追加して位置をドラッグし、角度や中心点を設定すると、プレビューがすぐに更新されます。既存の linear-gradient(…)、radial-gradient(…)、conic-gradient(…) を貼り付けて視覚的に編集することもできます。処理はすべてブラウザー内で行われます。

使い方

1. プリセットから始めるか、サンプルのグラデーションをそのまま使います。
2. 「種類」を選びます。線形と円錐には角度があり、放射と円錐には「中心 X」「中心 Y」で動かせる中心点があります。
3. 「カラーストップ」を編集します。ピッカーで色を変えるか任意の CSS カラーを入力し、「位置」をドラッグして移動します。「ストップを追加」は最も広い間隔に 1 つ挿入し、「反転」は順序を逆にします。
4. 「繰り返し」をオンにすると、グラデーションがタイル状に並び、縞や輪になります。
5. 「CSS」カードからコードをコピーします。ごく古いブラウザー向けに単色のフォールバックを付けることもできます。

下部の「グラデーション CSS」欄にはグラデーションの値が表示され、編集もできます。スタイルシートやデザインツールのグラデーションを貼り付けると、上のコントロールに反映されます。

例

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

きれいなグラデーションのコツ

• 控えめに。 隣り合う色相（青から紫、オレンジからピンク）は、反対色よりなめらかに見えます。反対色は中間が濁ったグレーになりがちです。
• 中間のストップを足して 混ざり方を調整しましょう。両隣より少し明るい 3 つ目のストップで、やわらかなハイライトが作れます。
• ハードストップで形を作る。 同じ位置のストップはくっきりした境界になります。ストライプ、旗、プログレスバー、円グラフはこの技を使っています。
• 方向。 to right は 90deg、to bottom（既定）は 180deg です。角度は真上から時計回りに数えます。
• グラデーション上の文字 は、グラデーション全体で読みやすくなければなりません。最も明るいストップと最も暗いストップを、コントラストチェッカーで文字色と比べましょう。