CSSグラデーションをデザインしてコードをコピー
このCSSグラデーション作成ツールは、<code>linear-gradient()</code>、<code>radial-gradient()</code>、<code>conic-gradient()</code> の背景を視覚的に作成します。ストップバーをクリックして色を追加し、ドラッグで位置を決め、各ストップの不透明度を設定したら、プレビューをリアルタイムで確認しながら角度・形状・中心を調整できます。単色のフォールバック付きCSSをコピーしたり、すぐ使えるTailwindクラスをコピーしたり、任意のサイズでPNGとして書き出したりできます。スタイルシートのグラデーションを貼り付けてここで編集することも可能です。すべてブラウザ内でローカルに処理されます。
CSSグラデーションの作り方
- 1線形、円形、扇形のいずれかを選ぶか、プリセットから始めます。
- 2ストップバーの任意の場所をクリックしてカラーストップを追加し、ドラッグで移動します。フォーカスしたストップで Delete を押すと削除できます。矢印キーでフォーカス中のストップを1%、Shift+矢印で10%移動します。
- 3各ストップの色と不透明度を選びます。hex、
rgb()、hsl()、oklch()、色名など、どのCSSカラーでも使えます。 - 4ダイヤルで角度を設定します（Shiftを押すと15°刻み）。円形・扇形グラデーションでは、プレビュー上をドラッグして中心を移動できます。
- 5CSSまたはTailwindクラスをコピーするか、幅と高さを指定してPNGをダウンロードします。
線形・円形・扇形グラデーション
- linear-gradient()
- 色が指定した角度の直線に沿って変化します。<code>0deg</code> は上向き、<code>90deg</code> は右向きで、キーワード <code>to right</code> や <code>to bottom left</code> は同じことを言葉で表します。グラデーションラインは、四隅に最初と最後の色が届くちょうどの長さになります。
- radial-gradient()
- 色が中心から円または楕円状に広がります。サイズキーワードで100%の位置が決まり、<code>farthest-corner</code>（既定）はボックスの最も遠い角まで、<code>closest-side</code> は最も近い辺で止まります。
- conic-gradient()
- 色が時計の針のように中心の周りを回り、<code>from</code> の角度から始まります。ハードストップを使えば、画像なしで円グラフやカラーホイールを作れます。
カラーストップ、くっきりした境界、透明度
カラーストップは色と位置の組み合わせです。2つのストップの間はブラウザがなめらかに混ぜ、2つのストップが同じ位置にあると色が急に切り替わります。ストライプ、国旗、円グラフはこの仕組みで描かれます。隣り合う2つのストップに同じ色を指定すると、その色を帯として保てます。
ストップは半透明にもできるので、画像をページに溶け込ませたり、ヒーロー画像の下部を暗くして白い文字を読みやすくしたりできます。最近のブラウザは透明なストップをプリマルチプライドカラーで混ぜるため、transparent へのフェードで中間が灰色になることはもうありませんが、わかりやすさのためにジェネレーターは明示的な rgba() カラーを書き出します。
繰り返しグラデーション
repeating-linear-gradient() とその円形・扇形版は、最初と最後のストップの間のパターンをボックス全体に繰り返します。繰り返しをオンにして最後のストップを100%よりかなり手前、たとえば10%に移動すると、ストライプ、リング、放射線模様ができます。最後のストップが100%にある場合、繰り返しグラデーションは通常のものとまったく同じに見えます。
フォールバックカラー、Tailwind、PNG書き出し
グラデーションは画像なので、描画できないブラウザでは文字の背後に何も表示されません。オプションのフォールバック行は、ストップの平均色で単色の background を先に設定し、その後のグラデーション行が対応ブラウザで上書きします。
Tailwindの出力は bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)] のような任意値クラスです。Tailwindのクラス名にはスペースを含められないため、スペースはアンダースコアに置き換えられます。Tailwind 3と4で設定なしに使えます。
PNG書き出しは、同じグラデーションを選んだサイズ（各辺最大8192ピクセル）でcanvasに描画します。壁紙、SNS用画像、CSSを読めないデザインツール向けです。コントラストチェッカーで文字に合う色を選んだり、カラーコード変換で表記を変換したり、ボックスシャドウ生成ツールで立体感を加えたりできます。
既存のグラデーションを編集する
インポートにグラデーションを貼り付けます。単体の linear-gradient(…)、background: や background-image: の宣言全体、-webkit- のベンダープレフィックス版、Tailwindの bg-[…] クラスに対応します。to top right のような方向、deg・turn・rad の角度、2つの位置を持つストップ、位置のないストップもすべて読み込めます。ピクセル位置とカラーヒントはパーセントのバーでは表示できないため近似され、インポート時にその旨が表示されます。
よくある質問
- CSSでグラデーション背景を作るには？
- background（またはbackground-image）にグラデーション関数を指定します。例：background: linear-gradient(90deg, #ff7e5f, #feb47b);。このツールはその行を自動で書き出し、前に単色のフォールバックを付けることもできます。
- 線形・円形・扇形グラデーションの違いは？
- 線形グラデーションは直線に沿って色が変わり、円形グラデーションは中心から円や楕円状に広がり、扇形グラデーションは時計の針のように中心の周りを回ります。
- くっきりした境界やストライプを作るには？
- 異なる色の2つのストップを同じ位置に置きます。繰り返しのストライプにするには、繰り返しをオンにして最後のストップを10%などの小さな値に置きます。
- CSSグラデーションは透明にできますか？
- はい。ストップの不透明度を下げると、rgba()として書き出されます。色から透明へのグラデーションは、画像やオーバーレイをページに溶け込ませる一般的な方法です。
- Tailwind CSSでグラデーションを使うには？
- bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)] のような任意値のTailwindクラスをコピーして要素に追加します。Tailwind標準のfrom-/via-/to-ユーティリティは単純な線形グラデーションにしか対応しませんが、任意値ならどんなグラデーションでも使えます。
- conic-gradientはすべてのブラウザで使えますか？
- conic-gradient()はChrome、Edge、Firefox、Safariの現行バージョンすべてで動作します。非常に古いブラウザもサポートする場合は、フォールバックカラーを追加してください。
- グラデーションを画像としてダウンロードできますか？
- はい。幅と高さを入力してPNGをダウンロードします。画像はブラウザ内でそのサイズちょうどに描画され、最大8192 × 8192ピクセルまで対応します。
- 何かアップロードされますか？
- いいえ。プレビュー、CSS、PNG書き出しはすべてブラウザ内で生成されます。