CSSグラデーションジェネレーター
색상 정지점
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 最終更新: 2026年 · 無料オンラインツール
CSSグラデーションジェネレーターとは？
ビジュアルエディターでCSSグラデーションを作成し、コードをコピーできる無料オンラインツール
使い方
- 1 タイプ選択 — グラデーションタイプ（linear、radial、conic）を選択します。
- 2 カラーストップの調整 — カラーストップの色と位置を調整します。
- 3 プレビュー確認 — プレビューでリアルタイムに結果を確認します。
- 4 CSSコードをコピー — 「コピー」ボタンでCSSコードをクリップボードにコピーします。
関連ツール
よくある質問
制限はありませんが、2〜6個が一般的です。多すぎるとパフォーマンスに影響する可能性があります。
はい。「繰り返し」チェックボックスを有効にするとrepeatingプレフィックスが追加されます。
Sunset、Ocean、Forest、Midnight、Rainbowの5種類のプリセットを提供しています。
現在は純粋なCSSのみ出力します。Tailwind変換は今後追加予定です。
いいえ。すべての処理はブラウザで行われます。