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

ライブのカラーストップで線形・放射・円錐のCSSグラデーションをデザインし、コードをコピー。すべてブラウザ内で完結します。

CSSグラデーションジェネレーターはすべてブラウザ内で完結します。デザインした色やグラデーション設定がArrayKitにアップロードされることはありません。

開発・運営：Udit Agarwal

CSSカラーコンバーターを開く

CSSグラデーションジェネレーター について

CSSグラデーションジェネレーターは、線形・放射・円錐グラデーションを視覚的にデザインできるツールで、background-imageの値を手作業で調整する必要がなくなります。グラデーションのタイプを選び、角度スライダーや中心位置をドラッグし、ネイティブのカラーピッカーと正確なパーセント位置で好きなだけカラーストップを追加・削除・変更できます。編集するとすぐにライブプレビューパネルが更新され、スタイルシートにそのまま貼り付けられるコピー可能な `background: ...;` 宣言が生成されます。デザインアプリを開かずにヒーローバナーやボタン、カードの背景を試作したいフロントエンド開発者やデザイナーのために作られています。すべてブラウザ内でローカルに処理されるため、作成したグラデーションがどこかにアップロードされることはありません。

機能

• 線形・放射・円錐の3種類のグラデーションを1つのツールで
• 無制限のカラーストップ、それぞれにネイティブのカラーピッカーとパーセント位置
• 追加・削除ボタンでストップを即座に追加または削除
• 線形・円錐グラデーション用の角度スライダーと数値入力
• 放射グラデーション用の円/楕円の形状切り替えとドラッグ可能な中心位置
• 操作するたびにライブプレビューパネルが更新
• コピー可能なCSSの `background: ...;` 宣言を生成
• すべてブラウザ内で完結し、何もアップロードされません

CSSグラデーションジェネレーター の使い方

1. グラデーションタイプとして線形・放射・円錐のいずれかを選択
2. 角度（線形/円錐)、または形状と中心位置（放射)を設定
3. カラーストップを追加し、それぞれの色とパーセント位置を調整
4. コードパネルから生成されたbackgroundのCSSをコピー

例

入力

linear, 90deg, red -> blue

出力

background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);

赤から青への2ストップの線形グラデーション、角度は90度。

よくあるエラーとトラブルシューティング

• グラデーションが平坦に見える、または単色しか表示されない。 — 異なる位置に少なくとも2つのカラーストップを追加してください。ストップが1つだけ、または同じ位置に2つある場合は、目に見える変化になりません。
• 放射グラデーションが円ではなく楕円として表示される。 — 形状の切り替えを「円」にするか、要素の縦横比に合わせたい場合は「楕円」のままにしてください。
• 円錐グラデーションが意図しない位置から始まる。 — 角度の値を調整してください。円錐グラデーションは選択した角度から時計回りに開始ストップを回転させ、0degは真上を指します。
• ストップ間で色が帯状になったり濁って見える。 — 大きく異なる2色を広い間隔でブラウザに補間させるのではなく、遷移点付近に中間のカラーストップを追加してください。

よくある質問

CSSグラデーションジェネレーターとは何ですか？

カラーストップから線形・放射・円錐のCSSグラデーションを作成できるビジュアルツールです。ライブプレビューとコピー可能なbackground宣言があり、グラデーションの構文を手書きする必要がありません。

CSSグラデーションジェネレーターは線形だけでなく放射や円錐グラデーションも作れますか？

はい。セグメントコントロールを「放射」にすると、ドラッグ可能な中心を持つ円形または楕円形のグラデーションが作れます。「円錐」にすると、選択した開始角度から中心の周りを回転するグラデーションが作れます。

グラデーションツールでカラーストップはいくつまで追加できますか？

好きなだけ追加できます。「ストップを追加」ボタンで新しいストップを追加し、各行の削除ボタンで削除できます。ただし少なくとも1つのストップは残す必要があります。

CSSグラデーションジェネレーターは色をどこかにアップロードしますか？

いいえ。CSSグラデーションジェネレーターはすべてブラウザ内で完結します。デザインした色、位置、グラデーションがデバイスの外に出ることはありません。

グラデーションジェネレーターはどのようなCSSを出力しますか？

background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); のような単一のbackground宣言を出力し、スタイルシート、style属性、CSS-in-JSテンプレートにそのまま貼り付けられます。

放射または円錐グラデーションの中心の位置を正確に指定できますか？

はい。中心X・中心Yのスライダーで、グラデーションの原点を各方向に要素の0%〜100%の範囲で自由に動かせます。

関連ツール

• CSS カラー変換 — HEX、RGB、HSL 間で変換し、ライブスウォッチを表示します。
• カラーフォーマットコンバーター — カラーを HEX・RGB・HSL・OKLCH など全形式に一度に変換します。
• Tailwind カラージェネレーター — 1 つのブランドカラーから OKLCH の 50-950 シェードスケールを生成します。
• CSS Grid ジェネレーター — グリッドを視覚的に設計し、grid-template CSS をコピーします。
• cubic-bezier ジェネレーター — 制御点をドラッグして CSS イージングカーブを作り、コピーします。
• CSS Box Shadowジェネレーター — ライブプレビューで重ね影のCSSを作成

Web & DevOpsの他のツール

• CSS Box Shadowジェネレーター — ライブプレビューで重ね影のCSSを作成
• Border Radius Generator — ライブプレビュー付きでシンプル・角ごと・ブロブ形状のCSS border-radiusを作成
• .editorconfig ジェネレーター — インデント・charset・改行から .editorconfig を作成。
• アスペクト比計算 — 比率の簡約・不足寸法の算出・CSS出力に対応。
• 配色パターン作成 — 調和のとれたカラーパレットを生成。色のロック、配色の選択、HEXのコピー、CSS・Tailwind・JSONへの書き出しに対応。
• chmod 計算ツール — Unixのファイル権限を8進数と記号表記（rwx）の間で変換します。
• .gitignore ジェネレーター — 言語やツールの一般的なテンプレートから .gitignore を作成します。
• HTTP ステータス & MIME タイプ — HTTPステータスコードとMIMEコンテンツタイプの検索可能なリファレンス。
• Open Graph ジェネレーター — Open GraphとTwitterのメタタグを生成し、ソーシャルカードをプレビューします。
• robots.txt 生成ツール — User-agentルールやサイトマップを備えたrobots.txtを視覚的に作成します。
• XMLサイトマップ生成ツール — URLのリストを標準準拠の sitemap.xml に変換します。
• .htaccess 生成ツール — Apacheのリライト・リダイレクト・キャッシュのルールを作成します。

Web & DevOpsのツールをすべて見る (27) · すべてのツール