CSSグラデーションジェネレーターとは、線形（linear）・放射（radial）・扇形（conic）のグラデーションを画面上で見ながら作り、CSSやTailwind形式のコードとして書き出せる無料ツールです。バーをクリックして色を追加し、つまみをドラッグして位置を調整するだけで配色が決まります。さらにこのツールは日本の伝統色273色をプリセットとして内蔵しており、「色の辞書」から選ぶだけで和の配色グラデーションを作れるのが特徴です。完成したコードはワンクリックでコピーでき、PNG画像としても書き出せます。
グラデーションはCSSで手書きもできますが、角度や色の止まる位置（カラーストップ）を数値で微調整しながら理想の見た目に近づけるのは手間がかかります。値を少し変えてはブラウザで確認し直す、という往復が地味に面倒です。だからこそ、見た目を確認しながら調整して、決まったらコードをそのまま貼り付けられるジェネレーターが役立ちます。
この記事では、CodeQuestが公開しているCSSグラデーションジェネレーターの使い方を解説します。3種類のグラデーションの使い分け、カラーストップの追加・移動・削除、日本の伝統色からの配色、CSS／Tailwind形式でのコード書き出し、PNGエクスポートまでを操作に沿って紹介します。ブラウザだけで完結し、登録は不要です。
CSSグラデーションジェネレーターとは：3種類を1か所でビジュアル生成
このツールの特徴は、CSSで使える線形・放射・扇形の3種類のグラデーションを、同じ画面で見た目を確認しながら作れる点です。タイプを切り替えると、それぞれに合った設定項目（線形なら角度、放射なら円・楕円の形状など）が現れ、カードのプレビューにリアルタイムで反映されます。CSSの構文を覚えていなくても、操作した結果がそのままコードになります。
グラデーション生成ツールは数多くありますが、このツールが他と違うのは日本の伝統色273色をプリセットとして内蔵していること。一般的なカラーピッカーで色を選ぶだけでなく、「色の辞書」から伝統色を選んでグラデーションに組み込めます。和の雰囲気を出したいバナーや背景を作るときに、色選びそのものを助けてくれるのが他のジェネレーターにない強みです。
このツールでできること
CSSグラデーションジェネレーターは、グラデーションを「作る・色を選ぶ・書き出す」ことに特化しています。主な機能は次のとおりです。
| 機能 | 内容 |
|---|---|
| グラデーションタイプ | 線形（linear）・放射（radial）・扇形（conic）の3種類を切り替えて生成 |
| 方向・形状の調整 | 線形は角度を指定。放射は「円」「楕円」の形状を選択できる |
| カラーストップ編集 | バーのクリックで色を追加、つまみのドラッグで位置を移動、ダブルクリックで削除。位置はパーセントでも指定可能 |
| 伝統色プリセット | 日本の伝統色273色を「色の辞書」から選んでグラデーションに組み込める |
| コード書き出し | CSS形式・Tailwind形式の両方に対応。「コードをコピー」でクリップボードに転送 |
| 画像書き出し | 作ったグラデーションを「PNGで書き出し」で画像として保存 |
| リアルタイムプレビュー | 調整した内容がカード上のプレビューに即座に反映される |
操作はすべてブラウザ内で完結し、外部のサーバーには送信されません。完全無料で、登録も不要です。
使い方：5ステップでグラデーションを作る
操作はおおきく5ステップです。むずかしい設定はありません。
- タイプを選ぶ： 線形・放射・扇形から、作りたいグラデーションの種類を選びます。
- 色を決める： バーをクリックしてカラーストップを追加し、各色を設定します。「色の辞書」から日本の伝統色を選ぶこともできます。
- 位置と方向を調整： つまみをドラッグして色の止まる位置を変え、線形なら角度、放射なら形状を整えます。位置はパーセントでの数値指定も可能です。
- コードをコピー： プレビューが理想どおりになったら、CSSまたはTailwind形式で「コードをコピー」します。
- 必要ならPNG書き出し： 画像として使いたい場合は「PNGで書き出し」でダウンロードします。
最初から色数を増やす必要はありません。2色のシンプルなグラデーションから始めて、必要に応じてカラーストップを足していくと、破綻のない配色に仕上がります。
線形・放射・扇形を使い分ける
CSSのグラデーションには大きく3種類があり、それぞれ向いている用途が異なります。このツールではタイプを切り替えるだけで試せるので、迷ったら3つとも当ててみて、いちばんしっくりくるものを選ぶのが早道です。
| タイプ | CSS関数 | 向いている用途 |
|---|---|---|
| 線形 | linear-gradient() | 背景・ボタン・帯など、まっすぐ色が変化する最も汎用的なグラデーション。角度で方向を調整 |
| 放射 | radial-gradient() | 中心から外側へ広がる光やスポットの表現。円・楕円を選べる |
| 扇形 | conic-gradient() | 中心を軸に色が回転する表現。円グラフ風の配色やカラーホイールに |
もっとも使用頻度が高いのは線形です。MDN Web Docsでも、線形グラデーションは「2つ以上の色が直線に沿って徐々に変化する」もので、角度や方向を指定できると説明されています（MDN Web Docs「linear-gradient()」）。まずは線形で基本をつかみ、表現の幅を広げたいときに放射・扇形を試すとよいでしょう。
カラーストップを自在に編集する
グラデーションの印象を決めるのがカラーストップ（色とその止まる位置の組み合わせ）です。このツールでは、グラデーションバー上で直感的に編集できます。
- 追加： グラデーションバーの好きな位置をクリックすると、新しいカラーストップが追加されます。
- 移動： つまみをドラッグすると、色の止まる位置が前後します。位置は「位置 %」で数値指定もできます。
- 削除： 不要になったつまみをダブルクリックすると削除されます。
色の境目をはっきりさせたいときは2つのストップを近づけ、なめらかに溶け込ませたいときは離す——という調整がドラッグだけで行えます。位置の数値が分かるので、左右対称の配色や等間隔のグラデーションもきれいに作れます。
日本の伝統色273色から配色する
このツールならではの機能が、日本の伝統色273色のプリセットです。カラーストップの色を決めるとき、「🎨 色の辞書から選ぶ」を開くと、藍色や朱色、若草色といった伝統色の一覧から選んでグラデーションに組み込めます。自分でカラーコードを探さなくても、名前と色見本を見ながら和の配色を作れます。
和菓子店や旅館、和をテーマにしたサイトの背景・バナーなど、「なんとなく日本っぽい色」を直感ではなく根拠のある伝統色で組み立てたいときに役立ちます。伝統色そのものの名前や由来を詳しく知りたい場合は、色の辞書の使い方｜日本の伝統色とCSS名前付き色を由来から引けるツールもあわせて使うと、色選びの幅が広がります。
CSS / Tailwind 形式でコードを書き出す
プレビューが完成したら、コードを書き出します。このツールはCSS形式とTailwind形式の両方に対応しているので、プロジェクトの書き方に合わせて選べます。「コードをコピー」を押すとクリップボードに転送され、そのままエディタに貼り付けられます。
素のCSSで使う場合は、生成された background プロパティをそのまま要素に当てるだけです。Tailwindを使っているプロジェクトなら、Tailwind形式に切り替えてコピーすれば、ユーティリティクラスの記法に沿った形で受け取れます。手書きで構文を組み立てる必要がないので、関数名や区切りのタイプミスも起きません。
PNG画像として書き出して活用する
作ったグラデーションは、コードだけでなくPNG画像としても書き出せます。「PNGで書き出し」ボタンを押すと、グラデーションが1枚の画像としてダウンロードされます。
CSSを使わない場面——たとえばスライドの背景、SNS投稿の下地、デザインカンプの配色見本などでは、画像のほうが扱いやすいことがあります。コードとして実装に使うか、画像として素材に使うか、用途に合わせて使い分けられるのは便利です。
グラデーションをデザインに使うときのコツ
グラデーションは手軽に華やかさを足せますが、使い方を誤ると読みにくくなったり、安っぽく見えたりします。仕上がりを良くするためのポイントをいくつか挙げます。
- 色数は欲張らない： 多くの場合、2〜3色でまとまります。色を増やすほど統一感は失われやすくなります。
- 近い色相でまとめる： 隣り合う色相同士はなめらかに変化します。離れた色を混ぜるときは中間色のストップを挟むと濁りを防げます。
- 文字を乗せるなら明度差を確保： グラデーション背景に文字を重ねる場合は、どの位置でも文字色とのコントラストが十分か確認します。
特に文字とのコントラストは見落とされがちです。WCAG 2.1の達成基準では、通常サイズの本文テキストに対して背景とのコントラスト比4.5:1以上が推奨されています（W3C「WCAG 2.1 達成基準1.4.3」）。グラデーションは場所によって明るさが変わるため、いちばん文字が見えにくくなる位置を基準に確認しておくと安全です。ボタンのグラデーションを作る場合は、グラデーションボタンの作り方｜CSSのみで実装するアニメーション付きGradient Buttonもあわせて参考にしてください。
よくある質問（FAQ）
Q. このツールは無料ですか？登録は必要ですか？
完全無料・登録不要です。すべてブラウザ内で動作し、入力した内容が外部に送信されることはありません。
Q. どんな種類のグラデーションを作れますか？
線形（linear-gradient）・放射（radial-gradient）・扇形（conic-gradient）の3種類に対応しています。線形は角度、放射は円・楕円の形状を指定できます。
Q. カラーストップはどうやって編集しますか？
グラデーションバーをクリックして色を追加し、つまみをドラッグで位置を移動、ダブルクリックで削除します。位置はパーセントでの数値指定もできます。
Q. 日本の伝統色を使えますか？
使えます。「色の辞書から選ぶ」を開くと、日本の伝統色273色のプリセットから色を選んでグラデーションに組み込めます。和の配色を作りたいときに便利です。
Q. 出力したコードはどの形式で使えますか？
CSS形式とTailwind形式の両方に対応しています。「コードをコピー」でクリップボードに転送し、そのままプロジェクトに貼り付けられます。
Q. 画像として保存できますか？
「PNGで書き出し」ボタンから、作ったグラデーションを画像としてダウンロードできます。スライドの背景やデザインの素材としても使えます。
まとめ
- CSSグラデーションジェネレーターは、線形・放射・扇形の3種類のグラデーションを見た目を確認しながら作れる無料ツール
- カラーストップはクリックで追加・ドラッグで移動・ダブルクリックで削除。位置はパーセントでも指定できる
- 日本の伝統色273色を「色の辞書」から選んでグラデーションに組み込めるのが他にない特徴
- 完成したグラデーションはCSS／Tailwind形式のコードコピーとPNG書き出しに対応
- ブラウザ完結・登録不要。まずは2色のシンプルなグラデーションから試すのがおすすめ
グラデーションは、色の組み合わせと止まる位置を少し変えるだけで印象が大きく変わります。まずはタイプを線形にして2色を置き、つまみを動かして「自分が気持ちいい」と感じる配色を探すところから始めてみてください。
関連記事
色の辞書の使い方｜日本の伝統色とCSS名前付き色を由来から引けるツール