CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。
135deg
0%
100%
CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
CSSグラデーションジェネレータの使い方
- 1グラデーションの種類を選択してください：直線、放射状、または円錐状。
- 2カラーストップを追加し、グラデーションバー上で位置を調整します。
- 3グラデーションの角度または方向を設定します。
- 4キャンバス上でグラデーションをリアルタイムでプレビューします。
- 5ワンクリックで生成されたCSSコードをコピーします。
Zenovayアナリティクス
関連ツール
CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。CSSグリッドジェネレータ
ビジュアルエディタでCSSグリッドレイアウトを構築します。列、行、隙間を定義し、セルを複数のエリアにまたがらせることができます。よくある質問
どのようなグラデーションタイプに対応していますか？▾
ツールは（角度調整可能な）線形グラデーションと放射状グラデーション（円形）をサポートしています。複雑なグラデーションを作成するために複数のカラーストップを追加できます。
より多くの色を追加するにはどうすればよいですか？▾
「カラーストップを追加」ボタンをクリックして新しい色を追加します。各ストップにはカラーピッカーと位置スライダー（0〜100%）があります。最大10個のカラーストップを追加できます。
CSSコードをコピーできますか？▾
はい。生成されたCSSコードはプレビューの下に表示され、ワンクリックでコピーできます。すべての最新ブラウザで動作する標準CSSを生成します。
ベンダープレフィックスを生成しますか？▾
いいえ。最新のブラウザ（Chrome、Firefox、Safari、Edge）はすべてプレフィックスなしのCSSグラデーションをサポートしています。ベンダープレフィックスはもう必要ありません。
スマートフォンでこのツールを使えますか？▾
はい、グラデーションジェネレーターは最新のモバイルブラウザで動作します。タッチコントロールで色、位置、角度を調整して、どのデバイスでもCSSをコピーできます。
Tailwind CSSや他のフレームワークで動作しますか？▾
はい。ツールはどのフレームワークでも動作する標準CSSのbackgroundプロパティを生成します。Tailwindでは、bg-[linear-gradient(...)]のような任意値構文を使用するか、カスタムクラスにCSSを直接適用できます。
カラーストップの最大数はいくつですか？▾
グラデーションごとに最大10個のカラーストップを追加できます。各ストップには調整可能な色と位置（0〜100%）があり、グラデーション遷移を精密にコントロールできます。