CSS グラデーションジェネレーター — 線形・放射・円錐、プレビュー付き
ドラッグできるカラーストップ、角度ダイヤル、プリセットで線形・放射・円錐グラデーションを作成。CSS や Tailwind のクラスをコピーできます。
background: #54a5d8; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 55%, #a7f3d0 100%);
bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%,#a7f3d0_100%)]
1 行目は、グラデーションを無視するメールクライアントや非常に古いブラウザ向けの単色のフォールバック（ストップの平均色）です。
すべてブラウザ内で動作します。入力した内容が送信・保存されることはありません。 すべての無料ツールを見る.
不具合や改善できそうな点を見つけましたか？いただいたメッセージはすべて読み、すぐに対応します。
この無料の CSS グラデーションジェネレーターは、線形・放射・円錐グラデーションを視覚的に作成し、貼り付けられる CSS を出力します。カラーストップをバーに沿ってドラッグし、バーをクリックしてストップを追加し、各ストップの不透明度を設定し、角度ダイヤルを回すと、そのたびにプレビューが更新されます。出力には単色のフォールバック色と Tailwind の任意値クラスが含まれるので、素の CSS でも、コンポーネントライブラリでも、ユーティリティファーストのコードベースでも使えます。
グラデーションは普通の CSS 画像なので、ネットワークリクエストが発生せず、どんなサイズにしてもぼやけず、写真や他のグラデーションに重ねられます。一方で落とし穴もあります。鮮やかな補色 2 色のグラデーションは真ん中でくすんだグレーを通りますし、グラデーション上のテキストは最も明るい部分でもコントラストの基準を満たす必要があります。以下の解説では、書き方、こうした落とし穴、繰り返しグラデーションでストライプを作る方法を取り上げます。
使い方
- 「線形」「放射」「円錐」から選び、パターンを繰り返したい場合は「繰り返し」にチェックを入れます。
- バー上のストップをクリックして選択し、下で色、位置、不透明度を変更します。バーの空いている所をクリックするとストップを追加でき、Delete キーで選択中のストップを削除できます。
- 角度ダイヤル（ドラッグまたは矢印キー）か、よく使う角度のボタンで方向を設定します。放射と円錐では中心点を設定します。
- または、プリセットから始めて調整します。
- CSS（フォールバックの行付き）か Tailwind のクラスをコピーします。
よくある質問
CSS でグラデーションを作るには？
グラデーション関数を背景画像として使います：background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); 最初の引数は方向（角度、または to right のようなキーワード）で、その後にカラーストップが続きます。各ストップは色と、省略可能な位置です。radial-gradient() は 1 点から広がり、conic-gradient() は 1 点のまわりを回ります。グラデーションは画像なので、background-color ではなく background か background-image に指定します。
linear-gradient の角度は何を意味しますか？
グラデーションが進む方向で、上から時計回りに測ります。0deg は下から上、90deg は左から右、180deg は上から下（省略時の初期値）、270deg は右から左です。0 度が右を指す数学の慣習とは異なるため、デザインツールによってはグラデーションが回転して出力されることがあります。
線形・放射・円錐グラデーションの違いは何ですか？
線形グラデーションは直線に沿って色が変わります。放射グラデーションは中心点から外側に向かって円か楕円状に色が変わり、サイズのキーワード（closest-side、farthest-corner など）で最後のストップの位置が決まります。円錐グラデーションは時計の針のように中心点のまわりで色が変わるので、円グラフ、カラーホイール、スピナーを作るのに使います。
CSS グラデーションでストライプを作るには？
2 つのストップを同じ位置に置くと、色が混ざらずにくっきりとした境界になります。それをパターンとして繰り返します。たとえば repeating-linear-gradient(45deg, #244b3f 0 10px, #e8f0ec 10px 20px) で幅 10px の斜めのストライプになります。ここにある「ストライプ」のプリセットは、同じことをパーセントで行っています。繰り返しグラデーションでは、最初と最後のストップの距離が 1 回分の繰り返しの長さになります。
Tailwind CSS でグラデーションを使うには？
2〜3 色の単純な線形グラデーションなら、bg-gradient-to-r from-indigo-600 to-cyan-500（Tailwind v4 では bg-linear-to-r）のような Tailwind のユーティリティを使います。角度、放射や円錐グラデーション、不透明度付きのストップなど、それ以外は任意値を使います。ここで生成される bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%)] のようなクラスで、アンダースコアがスペースの代わりです。非常に長い任意値は読みにくいので、テーマ設定に移すことを検討してください。
グラデーションの真ん中がくすんだりグレーになったりするのはなぜですか？
ブラウザは初期設定でグラデーションを sRGB で補間するため、鮮やかでほぼ正反対の 2 色（青から黄、赤から緑）を結ぶ直線は、彩度の低いグレーを通ります。きれいな中間色のストップを真ん中に追加するか、最新のブラウザなら知覚的な色空間で補間してください：linear-gradient(90deg in oklch, blue, yellow)。長く微妙なグラデーションに出る縞模様（バンディング）は別の問題で、8 ビットカラーが原因です。グラデーションに軽いノイズのテクスチャを重ねると目立たなくなります。
グラデーションの書式リファレンス
• linear-gradient(角度, ストップ, ストップ, ...)：角度は deg か turn、または to right や to bottom left のようなキーワード。初期値は 180deg（上から下）。
• radial-gradient(形状 サイズ at x y, ストップ)：形状は circle か ellipse（初期値は ellipse）。サイズは closest-side、closest-corner、farthest-side、farthest-corner（初期値）、または明示的な長さ。位置の初期値は center。
• conic-gradient(from 角度 at x y, ストップ)：ストップは円周上の度数かパーセントで配置します。継ぎ目のないホイールにするには、最初の色を最後のストップとして繰り返します。
• repeating-*-gradient()：書き方は同じで、要素の大きさいっぱいまでストップが繰り返されます。
• ストップ：色の後に 0 個、1 個、または 2 個の位置を続けます。位置を 2 つ指定すると（red 20% 40%）単色の帯になります。2 つのストップの間に位置だけを置くと（red, 30%, blue）、色の混ざり方の中間点が移動します。
• 透明度：rgba() か 8 桁の 16 進数でストップを指定します。透明へフェードするときは、キーワードの transparent ではなく同じ色の rgba(0,0,0,0) を使ってください。古いブラウザでは transparent が透明な黒を意味し、明るいグラデーションがグレーがかってしまいました。
グラデーションの上のテキストを読みやすく保つ
グラデーションに対するコントラストは、最も条件の悪い部分で決まります。テキストの色は、平均ではなく、最も明るいストップ（暗いテキストの場合）か最も暗いストップ（明るいテキストの場合）に対して、コントラストチェッカーで確認してください。
写真の上のテキストには、暗いオーバーレイのグラデーションを重ねるのが定番の解決策です。linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%) を画像の上に重ねると（「透明へフェード」プリセット）、キャプションがよく置かれる下部だけが暗くなります。背景のリストでは最初に指定します：background: linear-gradient(...), url(photo.jpg)。
生成される CSS の単色フォールバックは、HTML メールで重要です。多くのメールソフト、とりわけ Windows の Outlook はグラデーションを完全に無視します。フォールバックがないと、白いテキストが白い背景の上に表示されることがあります。
関連する無料ツール
- box-shadow ジェネレーター — 重ねた box-shadow や text-shadow の効果をライブプレビューでデザイン。エレベーション、ニューモーフィズム、グローのプリセット付きで、CSS をコピーできます。
- カラーパレット生成 — スペースキーで新しいパレットを生成し、気に入った色をロックし、配色の調和を選び、写真からパレットを抽出できます。CSS、Tailwind、SCSS、JSON、PNG で書き出し。
- コントラストチェッカー — 文字色と背景色を WCAG 2.x の AA・AAA の基準でチェックし、APCA の Lc 値を確認して、基準を満たす最も近い色を見つけられます。
- カラーピッカー＆変換 — 画面上のどこからでも色を取得したり、HEX、RGB、HSL を瞬時に相互変換したりできます。
- particles.js プレイグラウンド — コントロールまたは生の JSON で particles.js の設定を編集し、リアルタイムで動作を確認して、JSON やそのまま貼り付けられる HTML スニペットをコピーできます。