CSSグラデーションジェネレーター

backgroundまたはbackground-imageプロパティにグラデーション関数を指定します。最も基本的なのは2色のリニアグラデーションです：background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — これはインディゴからピンクへ左から右にブレンドします。上でお好みの色と角度を選択し、出来上がったbackground行をそのままスタイルシートにコピーするだけです。構文を手書きする必要はありません。ジェネレーターがカラーストップをドラッグするたびに自動的にコードを生成します。

linear-gradientは指定した角度の直線に沿って色をブレンドします（例：90deg = 左から右）。radial-gradientはスポットライトのように中心点から円形または楕円形に外側へ広がります。conic-gradientは時計の針のように中心点を軸に色が回転するため、カラーホイールや円グラフに最適です。本ツールは3つすべてに対応しており、「リニア / 放射 / コニック」ボタンで切り替えられます。Canvaの背景グラデーションツールなどほとんどの無料グラデーションツールはリニアしか対応しておらず、cssgradient.ioはコニックグラデーションに対応していません。

任意の要素のbackgroundにグラデーションを適用します。全ページの背景には次のようにします：body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }。グラデーションは画像として扱われるため、background-attachment: fixed; を追加するとページスクロール時も固定されます。上でビジュアルに作成してCSSをコピーするだけです。Figma・Canvaなどのデザインツールは必要ありません。2026年現在、プレフィックスなしですべてのモダンブラウザで動作します。

それぞれ位置を指定した追加のカラーストップを加えます。グラデーションバー上のどこかをクリック（または「+ ストップを追加」ボタン）して新しいストップを配置し、ドラッグで位置を調整します。3色の場合は linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%) のようになります。ストップ数に実質的な上限はありません。デザインの要件に応じていくつでも追加できます。実際のCSSを表示せずカラーパレットのみを提供するcoolors.coや、グラデーション編集にアカウントが必要なCanvaとは異なり、ここでは無制限ストップのプロダクション用CSSをすぐに生成できます。

リニアグラデーションの場合、最初の値が角度です：0degは上方向、90degは右方向、180degは下方向、270degは左方向を指します。「to right」や「to bottom right」などのキーワードも使えます。linear-gradient(to right, ...)はlinear-gradient(90deg, ...)と同じ意味です。角度スライダーをドラッグするか方向矢印をクリックすると、値がリアルタイムで更新されます。出力されるCSSは即座に更新されるため、任意のスタイルシートやフレームワークにそのままコピー＆ペーストできます。

2026年現在、必要ありません。linear-gradient・radial-gradient・conic-gradientはすべての現行ブラウザでプレフィックスなしでサポートされているため、background: linear-gradient(...)だけで十分です。-webkit-が必要なのは非常に古いSafari/iOS（2017年以前）やレガシーAndroid WebViewのみです。CSS出力の「-webkit-プレフィックスを追加」にチェックを入れると、標準の構文の上に正しく変換されたフォールバック行が出力されます。角度の変換（webkit版では90degが270degになる）は自動で処理されます。

方向クラスにfrom-・via-・to-カラーを組み合わせたグラデーションユーティリティを使います。例：bg-gradient-to-r from-indigo-500 to-pink-500。正確な色を使う場合は任意値で指定します：bg-gradient-to-r from-[#6366f1] to-[#ec4899]。出力をTailwindタブに切り替えると、現在のグラデーションのクラスをコピーできます。Tailwindに名前付きショートハンドのない放射グラデーションやコニックグラデーションには、bg-[linear-gradient(...)]形式の任意値も含まれます。このエッジケースをカバーしているTailwindグラデーションリソースはほとんどありません。

「PNG ダウンロード」をクリックします。ツールがHTMLキャンバスに1600x900でグラデーションを正確に描画し、.pngファイルとして保存します。スライドの背景・SNSバナー・デザインモックアップに最適です。レンダリングはすべてブラウザ内で行われるため、何もアップロードされません。サーバーへのファイルアップロードが必要なTinyWowや、PNG書き出しがサブスクリプション有料のAdobe Expressとは異なり、プライバシーリスクも費用もかかりません。別のサイズが必要な場合は、書き出し後に任意の画像編集ソフトでサイズを変更またはトリミングしてください。

「画像から生成」をクリックして写真を選択します。ツールがローカルでピクセルを読み取り、最も多く使われている色を見つけ、それをもとにグラデーションを生成します。ブランド写真や商品画像に合わせる際の素早い方法です。画像はデバイスから一切外部に送信されません。ブラウザ内で分析後、即座に破棄されます。パレット抽出にアップロードやアカウントが必要なAdobe ColorやCoolorsとは異なり、すべてがあなたのデバイス上でプライベートに処理されます。抽出されたストップの調整・角度の変更・放射グラデーションやコニックへの切り替えも可能です。

コニックグラデーションは直線ではなく、中心点を軸に色が回転します。時計の針のように色が遷移します。conic-gradient(from 0deg, red, yellow, green, blue, red) で完全なカラーホイールを作れます。円グラフ・ドーナツチャート・プログレスリング・カラーピッカー・角度のある発光エフェクトに最適です。Chrome・Firefox・Safari・Edgeでプレフィックスなしで2021年以降安定してサポートされています。上で「コニック」を選択して開始角度と中心位置を設定し、いろいろ試してみてください。ほとんどのグラデーターツールはコニックに対応していません。

ストップにアルファ値を設定します。ストップの不透明度スライダーを下げると、CSSがrgba()に切り替わります。例えば、linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) は透明から60%の黒にフェードアウトします。写真上のテキストの後ろに使う定番のスクリムです。ヒント：2つの異なる完全透明色の間をフェードさせると、ブラウザが濁ったグレーの中間点を生成することがあります。これを避けるには、同じ色の透明から不透明へのフェードにしてください。ストップの不透明度を調整すると、ツールが自動的にrgba出力を処理します。

UtiloKitのグラデーターはこれらのツールのすべての機能をカバーしています。リニア・放射・コニックのグラデーションタイプ、マルチストップエディター、コードのコピーに加え、Tailwind CSS出力・PNGダウンロード・画像からのグラデーション抽出・共有リンク・アニメーショングラデーション対応も備えています。cssgradient.ioはコニックグラデーションに非対応でTailwind出力もありません。ColorzillaのグラデーションエディターはブラウザExtensionであり、PNGのエクスポートやTailwindの出力には対応していません。ここではすべてがブラウザで動作し、アップロード不要・登録不要・機能制限なしで利用できます。

はい。このツールは完全なレスポンシブデザインで、あらゆるモダンなモバイルブラウザで動作します。iPhoneのSafariやAndroidのChromeで開き、グラデーションを作成して、CSSをクリップボードに直接コピーできます。すべてがクライアントサイドで動作するためダウンロード不要で、ページが一度読み込まれれば低速なモバイル回線でも動作します。ドラッグ操作によるストップエディターはタッチ入力に対応しているため、スマートフォンでのマルチストップグラデーション作成も直感的に行えます。