CSSグラデーションジェネレーターとは？
CSSグラデーションジェネレーターとは、グラデーションバー上のツマミをドラッグするだけで、CSSのグラデーションコード（linear-gradient / radial-gradient）を自動生成するツールです。色の位置や透明度を視覚的に調整でき、コードを手書きするより直感的にデザインを作れます。
CSSグラデーションジェネレーターの使い方
- ツマミをドラッグして位置を調整するバーの下にあるツマミを左右にドラッグすると、その色の位置が変わります。ツマミをタップ（クリック）で選択すると、下のパネルで色・位置・不透明度を細かく調整できます。
- 色を追加・削除するバーの空いている場所をクリックすると、その位置の中間色で新しい色が追加されます（最大6色）。不要な色は選択して「この色を削除」で消せます。
- 色を変更するカラーピッカーのほか、カラーコード（#0d3258 など）の直接入力にも対応しています。不透明度を下げるとrgba()形式で出力されます。
- コードをコピーするプレビューを確認して、生成されたCSSコードをコピーします。
角度の考え方
linear-gradientの角度は「0deg＝下から上」「90deg＝左から右」「180deg＝上から下」を表します。135degは「左上から右下」で、Webデザインでよく使われる角度です。
こんな場面で使えます
ヒーローセクションの背景
Webサイトのメインビジュアルの背景に使うグラデーションを作れます。
ボタン・カードのデザイン
CTAボタンやカードUIに立体感を出すグラデーションを生成できます。
バナー・OGP画像の配色検討
複数色の組み合わせの相性をプレビューで確認できます。
よくある質問
3色以上のグラデーションは作れますか？
はい、バーの空いている場所をクリックすると最大6色まで追加できます。追加された色はその位置の中間色になるので、自然なグラデーションを保ったまま色数を増やせます。
透明なグラデーションは作れますか？
はい、各色の不透明度を0〜100%で調整できます。100%未満にするとrgba()形式で出力され、プレビューの市松模様で透け具合を確認できます。
生成したコードはどのブラウザでも動きますか？
linear-gradient / radial-gradientは現在の主要ブラウザすべてでベンダープレフィックスなしで動作します。