CSSグラデーションジェネレーター
構文を覚えずにCSS背景グラデーションをデザインします。線形と放射タイプを切り替え、線形グラデーションの角度（度）を設定し、0%と100%の2つのカラーストップを選びます。
グラデーションの作り方
1. 線形または放射グラデーションを選びます。
2. 線形なら角度を度で設定します（0 = 下から上、90 = 左から右）。
3. 開始色と終了色（HEX）を入力します。
4. 結果カードからCSSをプロジェクトにコピーします。
グラデーションの例
線形ヒーローバナー（135deg）
ティール #6F9B96 からピーチ #E8C4B8 を135°——ランディングページヘッダーでよくある対角線。全幅セクションの背景として使います。
放射スポットライト
明るい中心と暗い端の放射タイプ——ビネットをシミュレート: radial-gradient(circle, #fff 0%, #333 100%)。
縦フェード（180deg）
ブランド色から白への上から下へのフェードに角度180——ナビゲーションバーの後ろに便利です。
このツールを使うとき
• UI背景をプロトタイプし、即座の視覚フィードバックが欲しいとき。
• 角度90degが左右か上下かを忘れるとき。
• CodePen、Tailwindの任意値、デザイン引き渡し向けのコピー＆ペーストCSSが必要なとき。
カラーストップの詳細
ストップは色と任意の位置です: #ff0000 0%、#0000ff 50%、#00ff00 100%。ブラウザはストップ間のRGBを補間します。中間ストップは帯状の夕焼けや複数ブランドのストライプを作ります。ここで2ストップから始め、devtoolsに貼って3つ目のストップを足し、見た目が合うまで調整します。
よくある質問
線形グラデーションのCSS構文は何ですか？
background: linear-gradient(angle, color1 0%, color2 100%); 角度は度、色は線に沿ったストップです。
カラーストップはどう動きますか？
ストップは各色がグラデーション線のどこに座るかを示します。0%は開始、100%は終了。このツールは2ストップを固定し、必要ならエディタで増やします。
線形と放射は？
線形は直線に沿って混ざります。放射は中心点から外へ混ざり、円と柔らかいスポットに適します。
よくある角度の値は？
0degは上、90degは右、180degは下、135degは対角線——カードとヒーローでよく使われます。
backgroundとbackground-imageのどちらを設定しますか？
出力はほとんどのdivに適したbackgroundショートハンドを使い、他の層を上書きするならbackground-imageに分けられます。