なぜ linear / radial / conic で Mode を分けているのですか?

種類ごとに必要なパラメータが異なる (linear=角度のみ / radial=形・サイズキーワード・中心 / conic=開始角・中心) ので、UI と推奨サンプルが大きく変わります。Mode-first にすることで「先に種類を決めてから細部を詰める」自然なフローになります。

色ストップの並び順は自動で並び替えされますか?

並び替えしません。CSS の `linear-gradient` 仕様上は明示した % の値が優先され、入力した順がそのまま色順になります (位置を交差させると同じ位置で色が切り替わる『ハードストップ』が作れます)。位置の並びと色順を一致させたい場合は手で位置を調整してください。

radial の `farthest-corner` などのキーワードは何を意味しますか?

グラデーションが終わる端を決めます。`farthest-corner` (既定) は要素の最も遠い角まで広げ、`farthest-side` は最も遠い辺まで、`closest-side` / `closest-corner` はそれぞれ最も近い辺・角までです。要素のアスペクト比とどう調和させたいかで選びます。

conic-gradient はどのブラウザで使えますか?

Chrome 69+ / Safari 12.1+ / Firefox 83+ / Edge 79+ で利用可能 (2020 年以降のメジャーブラウザはすべて対応)。Internet Explorer は非対応で、polyfill も実用的なものはありません。レガシー対応が必要な場合は SVG への切替を検討してください。

Tailwind CSS で使うにはどうすればいいですか?

出力 (background: 宣言なしの値だけ) をそのまま任意値クラスに貼り付けられます。例: ` `。Tailwind の任意値内では半角スペースをアンダースコアに置換するルールがあるので注意してください。

入力データはサーバーに送信されますか?

いいえ。色・パラメータ・プレビューはすべてブラウザ内で処理され、ネットワークに送信されません。

開発へ戻る

CSS グラデーション生成 (linear / radial / conic)

linear-gradient / radial-gradient / conic-gradient の 3 種類を **Mode 切替** で組めるブラウザ完結ビルダー。色ストップを追加・削除しながらライブプレビュー、角度 (linear / conic) や形・サイズ (radial)、中心位置 (radial / conic) を調整、CSS 文字列を `background: ...` 形式または値だけで出力します。Tailwind の任意値クラス `bg-[linear-gradient(...)]` にもそのまま貼れる形式。プレビュー / 計算はすべてブラウザ内で完結し、サーバーへ送信しません。

色生成

使い方

1) 種類をラジオで選びます (linear / radial / conic) — 切替で色ストップとサンプル値が初期化されます。 2) 色ストップを追加・削除し、それぞれカラーピッカーで色、数値入力で位置 (0〜100%) を指定します。 3) linear なら角度、radial なら形・サイズキーワード・中心、conic なら開始角・中心を調整。 4) プレビューが live で更新され、下段の CSS 出力をコピー。 5) 必要に応じて『background: 宣言を含める』のチェックで出力形式を切替できます。

よくある質問

なぜ linear / radial / conic で Mode を分けているのですか?: 種類ごとに必要なパラメータが異なる (linear=角度のみ / radial=形・サイズキーワード・中心 / conic=開始角・中心) ので、UI と推奨サンプルが大きく変わります。Mode-first にすることで「先に種類を決めてから細部を詰める」自然なフローになります。
色ストップの並び順は自動で並び替えされますか?: 並び替えしません。CSS の `linear-gradient` 仕様上は明示した % の値が優先され、入力した順がそのまま色順になります (位置を交差させると同じ位置で色が切り替わる『ハードストップ』が作れます)。位置の並びと色順を一致させたい場合は手で位置を調整してください。
radial の `farthest-corner` などのキーワードは何を意味しますか?: グラデーションが終わる端を決めます。`farthest-corner` (既定) は要素の最も遠い角まで広げ、`farthest-side` は最も遠い辺まで、`closest-side` / `closest-corner` はそれぞれ最も近い辺・角までです。要素のアスペクト比とどう調和させたいかで選びます。
conic-gradient はどのブラウザで使えますか?: Chrome 69+ / Safari 12.1+ / Firefox 83+ / Edge 79+ で利用可能 (2020 年以降のメジャーブラウザはすべて対応)。Internet Explorer は非対応で、polyfill も実用的なものはありません。レガシー対応が必要な場合は SVG への切替を検討してください。
Tailwind CSS で使うにはどうすればいいですか?: 出力 (background: 宣言なしの値だけ) をそのまま任意値クラスに貼り付けられます。例: `<div class="bg-[radial-gradient(circle_at_30%_30%,#ffeaa7_0%,#fab1a0_50%,#a29bfe_100%)]">`。Tailwind の任意値内では半角スペースをアンダースコアに置換するルールがあるので注意してください。
入力データはサーバーに送信されますか?: いいえ。色・パラメータ・プレビューはすべてブラウザ内で処理され、ネットワークに送信されません。

類似のツール

カラー変換 — HEX / RGB / HSL / HSV を相互

HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。

開発色変換

CSS シャドウビルダー — box-shadow / text-shadow を GUI で組み立て

CSS の box-shadow と text-shadow を GUI で組み立てるツール。Mode で box / text を切り替え、offset-x / offset-y / blur / spread (box のみ) / color / inset (box のみ) をスライダーと数値入力で調整。多重シャドウ (カンマ区切りで複数重ね) に対応し、Material Design 風の影や Neumorphism / 文字の縁取り / 蛍光グローなど 9 種類のプリセットからワンクリックで開始。ライブプレビュー (実 div / 実テキスト) + 値だけ / 宣言付きコピー切替対応。gradient-css の対称ツールとして CSS スタイル系のロングテール需要を満たします。すべてブラウザ内で処理。

開発生成

CSS easing ビルダー — cubic-bezier(x1,y1,x2,y2) GUI 編集

CSS の transition / animation で使う cubic-bezier() を、SVG プレビュー曲線 + ドラッグできる制御点 + 数値スライダーの 3 通りから組み立てるビルダー。ease / ease-in / ease-out / ease-in-out などの標準プリセット、Material 風の cubic、back (オーバーシュート) も収録。動きの実プレビュー (バーが画面端まで往復) で実際の感触を確認できます。出力は cubic-bezier(...) 値とそのまま貼れる transition-timing-function 宣言を切替可能。すべてブラウザ内で計算します。