構文を覚えなくてもCSSグラデーションを作る

linear-gradient(135deg, …) は手書きで間違えやすい構文です。プレビューでストップを決めてCSSをそのままコピーします。

このガイドで使う道具

やりたいこと

バナー・ボタン・チャート背景用に2〜3ストップのグラデーションが欲しい。値は単純でも記述が煩雑で、カンマの位置を間違えると宣言ごと静かに無視されます。

具体例

#336699（0%）と #d4a017（100%）の2ストップ・線形135°で background: linear-gradient(135deg, #336699 0%, #d4a017 100%); が出ます。そのままスタイルシートへ貼れます。50%に中間ストップを足すと帯状の遷移になります。

角度はCSSの向きと同じです：0degは上、90degは右、180degは下を向きます。放射グラデーションでは角度フィールドは無視されます。

制限

HEXカラーのみ対応です。デザイントークンがrgb()やoklch()なら、先にカラーコード変換でHEXに直してください。ストップ位置は%です。出力は位置順に並べ替えるので入力順は気にしなくて構いません。グラデーション上に文字を置くなら、最も明るい端と暗い端の両方でコントラストチェッカーを通してください。