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

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

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

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

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

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

機能

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

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

例

入力

linear, 90deg, red -> blue

出力

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

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

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

よくある質問

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%の範囲で自由に動かせます。

関連ツール

すべての ArrayKit ツール