Conic Gradient ジェネレーター
CSSコニックグラデーションは依然として未活用 — 手作業で書くのが難しいのが一因。このビルダーはellipse·square·rectangle·pie図形に適用されたグラデーションのライブプレビューを提供、`from` 角度と `at` 中心位置のスライダー付き。カラーストップの追加·削除、位置ドラッグ、システムカラーピッカーでカラー選択。5つのプリセット — 虹·夕焼け·モノクロ·チェッカーボード·3セグメントリングチャート — で開始可能。出力はどのスタイルシートにも入れられるプレーンCSS; すべてのモダンブラウザ（Chromium 69+·Firefox 83+·Safari 12.1+）で動作。
—
プリセット:
カラーストップ
0.0%
25.0%
50.0%
75.0%
100.0%
CSS
background: conic-gradient(#ef4444 0%, #f59e0b 25%, #10b981 50%, #3b82f6 75%, #a855f7 100%);
すべてのモダンブラウザ（Chromium 69+·Firefox 83+·Safari 12.1+）で動作。すべての値は度とパーセント。
使い方
- プリセットを選ぶか、デフォルトの虹から始める。調整するとプレビューが更新。
- `from` 角度をスライドしてグラデーション全体を回転。中心スライダーでconicの頂点を中心から外す。
- ハードトランジションが欲しい場所にストップ追加（同じ位置の2ストップは鋭いエッジを作る — パイチャートに便利）。
よくある質問
- Conicがlinear/radialとどう違う?
- Linearは直線に沿って補間、radialは点から外側の円へ、conicは円の周りで補間（時計の文字盤のように）。グラデーションが軸の周りをスイープすべきときconicを使う — パイ/ドーナツチャート·カラーホイール·チェック柄·ローディングスピナー。
- なぜ同じ位置にストップ2つ?
- 滑らかなトランジションの代わりにハードエッジを作る。`red 0% 25%, blue 25% 50%` は '0%から25%まで赤、そのまま25%から50%まで青' という意味 — パイチャートセグメントや鋭いチェッカーボードパターンに完璧。重複なしでは滑らかなブレンド。
関連ツール
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー 0 0
カラーパレット ジェネレーター
ベースカラーを選んで、クラシックなカラーホイールのハーモニーを取得 — 補色、スプリット補色、トライアド、テトラド、スクエア、アナロガス、モノクロマティック。
カラー 0 0
カラー ミキサー
2 色を RGB・HSL・CIELAB 空間で補間。11 段階の中間グラデーション ストリップ表示。
カラー 0 0
カラー補間 / グラデーションステップ
2 つの 16 進カラーを選び、N の離散中間ステップを得る — sRGB、線形 RGB、OKLab または HSL で — オプションのイージング付き。
カラー 0 0
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー 0 0
CSS 名前付きカラー
147 個の CSS / X11 named color — HEX・RGB・ライブスウォッチ、検索・色相系列別グループ化。
カラー 0 0