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%まで青' という意味 — パイチャートセグメントや鋭いチェッカーボードパターンに完璧。重複なしでは滑らかなブレンド。
関連ツール
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00