CSS conic-gradientジェネレーター

円錐グラデーションのCSSコードを視覚的に生成

プリセット

開始角度: 0°

中心X: 50%

中心Y: 50%

形状

カラーストップ

%

%

%

%

CSS コード

background: conic-gradient(#ff0000 0%, #00ff00 33%, #0000ff 66%, #ff0000 100%);

プレビュー

適用例

使い方

• プリセットから選択、または独自のカラーストップを追加
• 開始角度で回転、中心位置で中心点を調整
• カラーストップの色と位置を自由に編集
• 円グラフやカラーホイールの作成に最適
• リアルタイムプレビューで確認しながら調整
• 生成されたCSSコードをコピーして使用