CSSグラデーション生成ツール
線形・円形グラデーションを視覚的に作ってCSSをコピー
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
複数のカラーストップを自由に配置して線形（linear）・円形（radial）のグラデーションを作り、そのまま使えるCSSコードを生成します。
使い方
- カラーストップを追加し、色と位置を調整します。
- 線形／円形と角度を設定し、プレビューを確認します。
- 生成された background の CSS をコピーして使います。
よくある質問
- カラーストップとは何ですか？
- グラデーションの中で特定の色が置かれる位置のことです。複数置くことで多彩な変化を作れます。
- 円形グラデーションも作れますか？
- はい。linear と radial の両方に対応し、角度や中心を調整できます。
- 結果をそのまま使えますか？
- 生成された `background: linear-gradient(...)` のコードをそのままCSSに貼り付ければ使えます。