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

用途

CSS グラデーションは、画像アセットを使わずに背景・ボタン・ヒーローパネル・オーバーレイで滑らかな色の変化を描ける 1 行の CSS です。構文は強力ですが手書きには面倒で、角度、% でのストップ、繰り返しバリアント、線形と放射状の混在などを扱う必要があります。本ツールはビジュアルなビルダーで、CSS をリアルタイムにミラー表示します。ストップを所定位置にドラッグして、正確な linear-gradient(...) や radial-gradient(...) 文字列をコピーできます。

使うべきタイミング

• ヒーローや CTA セクションの背景を、画像に焼き込まずに作りたいとき。
• ボタンやカードのホバーステートを「モダン」に見せつつ、画像アセットなしで作りたいとき。
• ブランドカラーのオーバーレイ（テキスト可読性のためにグラデーション + 低不透明度ベタ）を作るとき。
• 装飾的なディバイダ、メッシュ風背景、アニメーション付き SVG 塗りを生成したいとき。

線形と放射状

• 線形（linear） — 指定した角度の直線に沿って色が遷移します（0° = 下から上、90° = 左から右、180° = 上から下）。
• 放射状（radial） — 中心点から円または楕円形に外側へ広がります。スポットライトやビネット効果に最適です。

よくある注意点

• background-color ではなく background として使用してください。 グラデーションは色ではなく画像です。background-color は無視されます。
• ストップは順序通りに。予測可能な描画のため、本ツールは自動でソートしますが、CSS をコピー後に手で編集する場合は %値を単調に保ってください。
• ハードストップ（同じ % に 2 つのストップ）は、フェードではなく境界線になります。ストライプやバンド効果に便利です。
• 大面積でのバンディング。 長くて低コントラストなグラデーションは、8-bit ディスプレイで段差が見えることがあります。微小な SVG ノイズオーバーレイ（filter: url(#noise)）を重ねるか、ストップを少しずらしてください。
• パフォーマンス。 グラデーションの描画自体は速いですが、background-image をアニメーションするとフレームごとに paint が走ります。代わりに上のレイヤーで transform をアニメーションしてください。
• アクセシビリティ。 グラデーション上にテキストを置く場合、平均ではなく、テキストが乗る最も悪い箇所のコントラスト比を確認してください。