CSSグラデーション
ジェネレーター
直感的なUIでCSSグラデーション（線形/放射/円錐）やCSSパターン背景を生成できる無料ツール。カラーストップの調整、24種のプリセット、リアルタイムプレビューを搭載。ブラウザ完結で安全・登録不要。
選択中の色を編集
生成CSSコード
生成CSSコード
CSSグラデーションジェネレーターの概要
CSSグラデーションジェネレーターは、JavaScriptや画像ファイルを使わずに、CSS単体で美しいグラデーションやパターン背景をデザインできる開発者・デザイナー向けの無料ツールです。直感的なUIを通じて、線形(Linear)、放射(Radial)、円錐(Conic)の各種グラデーションを作成し、そのままプロジェクトで使えるCSSコードを出力します。
複雑なカラーストップの追加や透明度（Alpha）の調整もスライダーで滑らかに行うことができます。また、あらかじめ用意された24種類の美しいプリセットや、12種類のCSSパターンジェネレーターも搭載しているため、デザインのアイデア出しから実装までをブラウザ上でシームレスに完結させることが可能です。
ツールの使い方
タイプの選択と基本設定
「グラデーション」タブを開き、線形・放射・円錐からお好みのスタイルを選択します。線形の場合は角度スライダーを、放射の場合は中心位置や形状を設定して、光の当たり方や広がり方を決定します。
カラーストップの追加と編集
グラデーションバーの上の任意の位置をクリックして新しい色（カラーストップ）を追加します。追加したピンを左右にドラッグしてグラデーションの滑らかさを調整し、下部のカラーピッカー（HEXまたはHSLAスライダー）で色と透明度を細かく設定してください。
プレビューの確認とコードのコピー
プレビュー領域でリアルタイムに結果を確認できます。右上の「全画面プレビュー」ボタンを活用して実際の見え方をチェックしたら、下部の「CSSコードをコピー」ボタンをクリックして、あなたのWebサイトのスタイルシートに直接貼り付けてください。
グラデーション用語集
- CSS グラデーション
- linear-gradient() や radial-gradient() などのCSS関数を用いて、2つ以上の色が滑らかに変化する背景を描画する技術です。画像を使用しないためページの読み込み速度が速くなります。
- カラーストップ (Color Stop)
- グラデーションにおいて、特定の色の基準となる位置（0%〜100%）のことです。カラーストップを増やしたり位置を近づけたりすることで、グラデーションの境界線をくっきりさせることも可能です。
- 線形グラデーション (linear-gradient)
- 指定した角度（例: 135deg）や方向（例: to right）に向かって直線的に色が変化する、最も一般的なグラデーション手法です。
- 放射グラデーション (radial-gradient)
- 指定した中心点から円（circle）または楕円（ellipse）状に外側に向かって色が広がっていくグラデーション手法です。
- 円錐グラデーション (conic-gradient)
- 中心点を軸として、時計回りに色が変わっていくグラデーション手法です。カラーホイールや円グラフをCSSだけで表現する際に頻繁に用いられます。
- HSLA カラー
- 色相(Hue)、彩度(Saturation)、明度(Lightness)、透明度(Alpha)の4つの値で色を指定する手法。直感的に「色を少し暗くする」「鮮やかにする」といった調整がしやすいのが特徴です。
よくある質問
- Q.作成したグラデーションコードは商用サイトで使えますか？
- はい、完全に商用利用可能です。本ツールで生成されたCSSコードには著作権等の制限は一切なく、個人・法人問わず無料でお使いいただけます。
- Q.モバイル端末（スマートフォン）からでも操作できますか？
- はい、レスポンシブ対応はもちろんのこと、カラーストップの追加やドラッグ＆ドロップといった操作もタッチデバイスに最適化されているため、スマートフォンからでも快適にデザインを作成できます。
- Q.グラデーションがIEなどの古いブラウザで表示されません。
- IE11を含む古いブラウザでは最新のCSS関数（特に conic-gradient）がサポートされていない場合があります。本ツールが生成するコードはモダンブラウザ向けですが、必要に応じて単一の背景色（background-color）をフォールバックとしてCSSに併記することをお勧めします。
- Q.生成されたパターン背景のサイズを変えるには？
- パターンの生成タブにある「サイズ」スライダーを調整することで、繰り返しのスケールを変更できます。生成されるCSS内の background-size プロパティが自動的に書き換わります。
- Q.画像として保存することは可能ですか？
- 本ツールは「CSSコード」を生成するためのツールであるため、直接PNGやJPGとして保存する機能はありません。全画面プレビューモードを開き、OSのスクリーンショット機能を利用して画像を保存してください。
活用シーン
ヒーローセクションのデザイン
Webサイトのファーストビューにおいて、パステルカラーやサンセット系のグラデーションを適用することで、ユーザーに強い印象と没入感を与えることができます。
グラスモーフィズムの実装
透明度（Alpha）を下げたグラデーションを背景に設定し、backdrop-filter: blur() を組み合わせることで、すりガラスのようなモダンなUIコンポーネントを作成できます。
軽量な背景パターンの適用
ドットやストライプのパターンを画像を使わずにCSSのみで実装することで、サイトのパフォーマンス（PageSpeed Insightsなどのスコア）を落とさずにリッチなデザインを実現できます。
データビジュアライゼーション
円錐（Conic）グラデーションを利用して、JavaScriptの複雑なライブラリを使わずにシンプルな円グラフやプログレスバーを表現する際に役立ちます。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。