無料オンラインCSSグラデーションジェネレーター
リニア、ラジアル、コニックグラデーションをライブプレビューで作成。CSSコードを即座にコピー。
Who uses the CSSグラデーションジェネレーター?
- ヒーローセクションやUIコンポーネント用の背景グラデーションを作成するフロントエンド開発者。
- グラデーションベースのビジュアルアイデンティティやブランドカラーの遷移をプロトタイピングするデザイナー。
- ビジュアルでインタラクティブなビルダーを通じてグラデーション構文を理解するCSS学習者。
How the CSSグラデーションジェネレーター works
グラデーションタイプを選択します：Linear、Radial、またはConic。
カラーストップのスウォッチをクリックして、カラーピッカーで色を変更します。
各ストップの隣にあるスライダーで位置を調整するか、「+ Add color stop」で新しいストップを追加します。
角度（linear/conic）を調整し、出力パネルからCSSコードをコピーします。
Tips & tricks
- 少なくとも2つのカラーストップが必要です——削除（×）ボタンは3つ以上になったときのみ表示されます。
- 放射状グラデーションでは、中央配置の円形グラデーションに調整すべき方向がないため、角度コントロールが非表示になります。
- ストップは追加した順序に関係なく、出力CSSでは常に位置順に表示されます。
- カラーピッカーはアルファチャンネル/透明度をサポートしていません——透明なストップが必要な場合は、コピーしたCSSに手動でrgba()を追加してください。
Frequently Asked Questions
線形グラデーションのCSS構文は？
background: linear-gradient(方向, 色1, 色2)。例：background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)。方向は角度（45deg）またはキーワード（to right、to bottom right）を指定できます。
放射状グラデーションはどう作りますか？
background: radial-gradient(形状 サイズ at 位置, 色1, 色2)。例：background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%)。このツールは中央に配置された円形の放射状グラデーションを生成します。
カラーストップを3つ以上追加できますか？
はい。必要なだけ「+ Add color stop」をクリックしてください。各ストップには独自のカラーピッカーと位置スライダーがあり、出力CSSではストップが位置順に自動的にソートされます。
透明なグラデーションを作るには？
透明なストップには、アルファ付きのrgba()または16進数を使用します。例：linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)は暗くフェードする効果を作り出し、テキストの視認性を高めるためにヒーロー画像のオーバーレイとしてよく使われます。このツールのカラーピッカーにはアルファチャンネルが含まれないため、透明度が必要な場合はコピーしたCSSを手動で編集してください。
CSSグラデーションはすべてのブラウザで動作しますか？
CSSグラデーションはすべての現代的なブラウザ（Chrome、Firefox、Safari、Edge、Opera）でサポートされています。現代的なブラウザではベンダープレフィックス（-webkit-）は厳密には不要ですが、このツールは古いブラウザのカバレッジのために出力に-webkit-プレフィックス付きの行を含めています。
Is my data safe when using the CSSグラデーションジェネレーター?
Completely safe. The CSSグラデーションジェネレーター processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSSグラデーションジェネレーター output in commercial projects?
Yes. The CSSグラデーションジェネレーター is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSSグラデーションジェネレーター follow official standards?
Yes. The CSSグラデーションジェネレーター is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.