CSSグラデーションジェネレーター
線形、放射状、コニックグラデーションをビジュアルに作成。カラーストップを追加し、プリセットから選択、CSS、Tailwind設定、SVGとしてエクスポート。1920×1080 PNGとしてダウンロード。
プリセット
CSSグラデーションジェネレーター — 美しいグラデーションをビジュアルに作成
CSSグラデーションはほとんどの背景デザイン作業で画像に取って代わりました。解像度に依存せず、即座に読み込まれ、アニメーション化も可能です。このジェネレーターは3種類すべてのCSSグラデーションのビジュアルエディターを提供し、ライブプレビューとCSS、Tailwind CSS、SVGのコピー可能な出力を備えています。
3種類のグラデーション
- 線形グラデーション — 直線に沿って色を移行。角度（0°–360°）を制御。ヒーロー背景、カード、ボタンに最も一般的。
- 放射状グラデーション — 中心点から外側に色を移行。スポットライトや円形グロー効果を作成。
- コニックグラデーション — カラーホイールのように中心点の周りに色を移行。円グラフや進捗インジケーターに便利。
エクスポート形式
- CSS — 標準の
backgroundプロパティ、任意のスタイルシートに貼り付け可能。 - Tailwind CSS — 任意値構文を使用：
bg-[linear-gradient(...)]。 - SVG — linearGradient定義を含む自己完結型SVG。
- PNGダウンロード — グラデーションを1920×1080キャンバスにレンダリングしてPNGとしてダウンロード。SNS背景やFigmaインポートに便利。
よくある使用例
- ランディングページの目を引くヒーローセクション背景を作成。
- ボタンのホバーエフェクトとカード背景を生成。
- プレゼンテーションやSNS用のブランドカラー進行を構築。
- デスクトップやモバイル用グラデーション壁紙をエクスポート。
よくある質問
- どのタイプのCSSグラデーションを作成できますか？
- リニア、ラジアル、コニックグラデーションです。リニアは調整可能な角度で直線に沿って色を遷移させます。ラジアルは中心点から外側に遷移します。コニックはカラーホイールのように中心点の周りで遷移します。
- CSSコードを直接コピーできますか？
- はい。ワンクリックコピーで任意のスタイルシートに貼り付け可能な完全なCSSグラデーションコードが得られます。Tailwind CSSの任意値構文やSVGとしてもエクスポートできます。
- 複数のカラーストップに対応していますか？
- はい。完全な位置制御で必要なだけカラーストップを追加できます。各ストップはグラデーションに沿った特定のパーセンテージ位置で任意の色を設定できます。
- グラデーションを画像としてエクスポートできますか？
- はい。1920x1080のPNG画像としてグラデーションをダウンロードでき、Figmaなどのデザインツール、ソーシャルメディアの背景、デスクトップ壁紙に最適です。
- このグラデーションジェネレーターは無料ですか？
- はい、制限なし、サインアップ不要、エクスポート画像にウォーターマークなしで完全に無料です。