グラデーションジェネレーター
ブラウザ上でCSSグラデーションを見ながら調整できます。linear、radial、conicに加えて、それぞれのrepeating形式にも対応し、種類、角度、形状、中心位置、カラーストップ、不透明度をひとつの画面で編集できます。ヒーロー背景、ボタンやカードのハイライト、ダークモードの奥行き、キャンペーンバナー、デザインシステム内のブランドカラー遷移に使いやすいツールです。出力はそのままコピーできるCSSで、色やプリセットはアップロードされず、すべてローカルで描画されます。
- グラデーションの種類、角度、形状、中心位置、カラーストップを視覚的に調整し、リアルタイムで確認できます
- ブランドカラー、ダークモード、ガラス風サーフェス、ネオン、装飾的なリピートなどを含む豊富なプリセットを用意
- 古いブラウザや制約のある環境向けに、任意でフォールバックカラー付きのCSSを出力できます
- カラーストップごとにアルファ値と位置を設定でき、2色のシンプルな遷移から多層的な表現まで作れます
- 編集はすべてブラウザ内で完結するため、未公開のブランドビジュアルや機密性の高いデザインにも使いやすい設計です
background: #6366f1; background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
概要
グラデーションに必要な主要パラメータをひとつの画面にまとめています。カラーピッカー、コードエディタ、プレビュー画面を行き来せず、見た目を整えたらそのままCSSをコピーしてプロジェクトに戻せます。
- 01
6種類のグラデーションを同じ画面で編集
linear、radial、conicと、それぞれのrepeating形式を同じコントロールパネルで扱えます。スタイルを切り替えても、近い考え方のパラメータをそのまま調整できます。
- 02
カラーストップを細かく調整
各ストップでHEXカラー、位置のパーセンテージ、不透明度を設定できます。2色のなめらかな遷移から、複数ストップの背景レイヤーまで自然に拡張できます。
- 03
角度と中心位置をまとめて操作
linearとconicでは角度スライダーとよく使う角度ショートカットを使えます。radialとconicでは中心位置も調整できるため、レイアウトに合わせて視線の集まる場所を揃えられます。
- 04
作り始めに便利なプリセット集
70種類以上の厳選プリセットを用意しています。ブランドカラー、ダークテーマ、ガラス風、ネオン、パステル、繰り返しテクスチャなどから選んで、すぐに調整を始められます。
- 05
フォールバックを意識したCSS出力
必要に応じて単色のbackground宣言を先に出力できます。古いブラウザ、メールクライアント、PDF書き出しなどでも、最低限自然な背景色を表示できます。
- 06
透明度も見やすいライブプレビュー
プレビューの背面にチェッカーボードを表示するため、半透明のストップがどのように抜けるかを確認しやすく、実際の背景に乗せる前の判断に役立ちます。
使い方
アイデア出しから本番で使えるCSSのコピーまで、ひとつのパネルで完結します。素早い試作にも、デザインファイルとスタイルコードを行き来する作業にも向いています。
- 01
まずグラデーションの種類を選びます。ヒーロー背景ならlinear、やわらかい光の表現ならradialから始めると扱いやすいです。
- 02
角度、形状、中心位置を調整し、レイアウトや視線の流れに合うように見た目の焦点を合わせます。
- 03
各カラーストップの色、位置、不透明度を順番に編集し、必要に応じてストップを追加または削除します。
- 04
プレビューを確認し、半透明部分も含めて、上に置くテキストやアイコンが読みやすいか見ます。
- 05
互換性を重視する場合はフォールバックカラーを有効にし、CSSをスタイルシート、コンポーネント、テーマトークンへコピーします。
詳細
グラデーションは、ランディングページのファーストビューから、控えめなコンポーネント状態まで幅広く使われます。デザインと実装、ライトテーマとダークテーマ、アクセシビリティを考慮する画面の間で、再現しやすい形にしておくことが大切です。
- linear-gradient、radial-gradient、conic-gradientと、それぞれのrepeating形式を含むCSSグラデーション全般に対応
- 正確なパーセンテージ位置と0〜100のアルファ値により、デザインファイルで作った繊細な遷移を再現できます
- linearとconicでは、45、90、135度などのよく使う角度をすばやく選べます
- radialとconicの中心位置コントロールで、周囲のレイアウトに合わせて視覚的な焦点を調整できます
- プリセットはグラデーションの種類ごとに絞り込まれるため、切り替え後も関連する候補だけを確認できます
- ランダム生成により、種類と方向を決めた後でも新しい色の組み合わせを素早く試せます
- フォールバック出力は、アクセシビリティ向けの簡略表示、メールテンプレート、PDFなど制約のあるレンダラーで便利です
- プレビュー下のチェッカーボードにより、半透明のグラデーションを確認しやすくなっています
- すべての計算はブラウザ内で行われるため、未公開のブランドビジュアルや社内アセットを外部に送信しません
- 出力CSSはTailwindの任意値、CSS変数、Sass mixin、コンポーネントライブラリに組み込みやすい形です
- カラー変換、コントラストチェック、パレット生成と組み合わせると、完整なカラー制作フローを作れます
活用シーン
よく調整されたグラデーションは、プロダクトの第一印象を大きく左右します。同じ表現を、ヒーロー背景からコンポーネント状態、キャンペーン素材まで無理なく展開できることが重要です。
-
マーケティングサイトのヒーロー背景
彩度を抑えた複数ストップのグラデーションなら、ブランド感を保ちながら、見出し、サブコピー、ボタンの読みやすさも確保できます。
-
ボタンとインタラクション状態
primary、hover、active、selectedの各状態で共通のグラデーション設計を使うと、コンポーネント全体の奥行きやフィードバックが揃います。
-
カードと情報のグルーピング
カード、数値パネル、ステータス面に控えめなグラデーションを使うと、フラットな塗りよりも自然にまとまりを作れます。
-
ダークモードの奥行きづくり
ダークテーマでは、低輝度の複数ストップグラデーションを使うことで、単調な黒を避け、重たさを抑えた余白感を作れます。
-
キャンペーンや季節テーマ
イベントページや季節バナーには、表情はあるけれど制御された色の勢いが必要です。プリセットとランダム生成を使えば、短時間で方向性を探れます。
-
ブランドシステムとデザイントークン
安定したグラデーションはCSS変数やデザイントークンにできます。複数の画面で同じブランド感を共有しつつ、毎回作り直す必要がなくなります。
-
ダッシュボードとチャートコンテナ
チャート枠やKPIカードに軽いグラデーションを入れると、データへの注目を奪わずに情報のまとまりと読みやすさを高められます。
-
メールテンプレートと書き出し素材
メール、PDF、ポスターなどでは、フォールバック付き出力により、対応が限られる環境でも自然な単色背景を表示できます。
-
プロトタイプと高精度デモ
探索段階ではプリセットで素早く雰囲気を作り、方向性が固まったらそのパラメータを正式なデザイントークンへ昇格できます。
-
サインイン、空状態、エラーページ
これらのページは余白が多く、視覚的な手がかりが少なくなりがちです。控えめなグラデーションを使うと、フォーム、メッセージ、CTAを邪魔せず空気感を足せます。
関連情報
既存のブランドカラーやトークン値からグラデーションを作る場合は、まず各ストップを カラーコンバーター で正規化してから遷移を微調整すると扱いやすくなります。グラデーションの上に見出し、ボタンラベル、バッジを置く場合は、リリース前に実際の前景色と背景の組み合わせを コントラストチェッカー で確認し、見た目の美しさだけでなく読みやすさも担保してください。
使い方のヒント
グラデーションは見た目の表現に見えますが、本番で安定して使うには、読みやすさ、パフォーマンス、テーマ対応、保守性をまとめて考える必要があります。
- テキストが乗る範囲では必ず十分なコントラストを確保します。グラデーションは内容を支えるもので、邪魔するものではありません。
- 多くのUIでは2〜4個のストップで十分です。増やしすぎるとバンディング、ノイズ、保守負担につながります。
- ダークモードでは、明るい帯が前景を圧倒しないように、彩度や不透明度を控えめにします。
- インタラクティブな面では、hover、active、disabled状態を同じグラデーション設計から派生できる余地を残します。
- 完成したグラデーションは、多数のコンポーネントへ文字列で直接貼るのではなく、CSS変数やデザイントークンに昇格させます。
- radialやconicの中心位置は、主要なブレークポイントで確認し、モバイル画面で焦点が不自然にずれないようにします。
- アクセシビリティ向けの簡略表示にはフォールバックカラーを使い、グラデーションが無効な環境でも読みやすさを確認します。
- チーム運用では、方向とストップ位置をデザインシステムに記録し、口頭の受け渡しで値がずれないようにします。
制限事項
最終的な描画は、ブラウザ、ディスプレイ、周囲のCSSに左右されます。構文が標準化されていても、見た目が完全に同じになるとは限りません。
- ブラウザによってカラーマネジメント、アンチエイリアス、サブピクセル描画が異なるため、複雑なグラデーションでは小さな差が出ることがあります。
- 高頻度のrepeatingグラデーションやストップ数の多いレイヤーは、特に低性能端末や全画面サイズで描画コストが高くなります。
- このツールはCSSの視覚表現に集中しています。画像圧縮、ビットマップ書き出し、カラープロファイル管理は対象外です。
- ライトモード向けに調整したグラデーションは、基本的にダークモードでも別途確認したほうが安全です。
- プロジェクトがトークン化されたスタイル運用をしている場合は、出力をそのまま貼り付けるのではなく、承認済みのトークン名へ対応付けてください。
- アクセシビリティが重要な画面では、専用のコントラストツールで前景色と背景の組み合わせを確認してください。
- 印刷物や大判出力では、インク、紙、印刷工程により見え方が変わるため、最終的には刷り見本で確認する必要があります。
よくある質問
フロントエンド実装やデザイン協業でグラデーションを使うときに、用途、互換性、データの扱い、実用上の制限についてよく出る質問です。
生成されたCSSはそのまま本番で使えますか？
はい。出力は標準的なCSSグラデーション構文に沿っており、スタイルシート、コンポーネントスタイル、Tailwindの任意値、CSS変数にそのまま貼り付けられます。
フォールバックカラーはいつ有効にすべきですか？
古いブラウザ、メールクライアント、PDF書き出し、対象構文に対応していない可能性がある環境を想定する場合に有効にしてください。先に単色のbackground宣言を出し、その上にグラデーションを重ねます。
repeatingグラデーションはどんな場面で便利ですか？
ストライプ、リング状の質感、装飾的な帯の表現に向いています。ビットマップ画像の代わりに、レスポンシブに伸縮するCSS表現として使えます。
カラーストップは多いほど良いですか？
いいえ。多くのUIでは2〜4個で十分です。増やしすぎるとバンディングやノイズが出やすくなり、保守もしづらくなります。
編集中の色はアップロードされますか？
いいえ。描画、プレビュー、出力はすべてブラウザ内で行われます。未公開のブランドビジュアルや機密性の高いデザインファイルにも使いやすい設計です。
同じグラデーションをページ間で揃えるにはどうすればよいですか？
完成したCSSを共有変数やデザイントークンにして、複数ファイルにリテラル文字列として繰り返し貼るのではなく、再利用コンポーネントから参照するのがおすすめです。
Tailwindでも使えますか？
はい。出力は任意値構文の背景として使えますし、tailwind.configのbackgroundImageやtheme拡張にも登録できます。
プレビューがデザインファイルと少し違って見えるのはなぜですか？
多くの場合、カラープロファイル、ディスプレイの色域、明るさのキャリブレーション、最終ページで重なる別のスタイルが原因です。重要なケースでは対象デバイスで確認してください。
ランダム生成を使うと現在の設定は消えますか？
通常、グラデーションの種類や方向は保ちつつ、カラーストップを置き換えます。現在の結果を残したい場合は、先にCSSをコピーしてバックアップしてから試してください。
ライトモードとダークモードで同じグラデーションを使えますか？
使うことはできますが、別バージョンを調整するほうが安全です。同じ色でも背景の明るさが変わると見え方が大きく変わります。
radialやconicの中心位置はどこに置くべきですか？
レイアウト次第です。少し外した焦点にしたい場合は、該当する軸で30〜40%付近を試してください。やわらかく中央に光らせたい場合は50%付近が扱いやすいです。
グラデーションはページ性能に影響しますか？
シンプルな2〜3ストップのグラデーションは軽量です。一方で、全画面サイズの多ストップrepeatingグラデーションは、低性能端末やスクロール領域で合成コストが上がることがあります。必要に応じて画像化や使用範囲の限定を検討してください。
関連ツール
グラデーションは大きなカラー制作フローの一部です。カラー変換、パレット生成、コントラストチェックと組み合わせることで、正規化された色からスケール展開、アクセシビリティ確認、本番UIへの適用までつなげられます。