Skip to main content
FreeToolkit .ai

CSS コニックグラデーション ジェネレーター パイチャート、カラーホイール、スウィープ効果用のCSSコニックグラデーションを作成します。

コニックグラデーションジェネレーター illustration
🎨

コニックグラデーションジェネレーター

パイチャート、カラーホイール、スウィープ効果用のCSSコニックグラデーションを作成します。

1

色を設定

コニックスイープに使用する3つの色を選択します。

2

設定の調整

開始角度と中心位置を設定します。

3

CSS をコピー

生成されたコニックグラデーションの CSS コードをコピーします。

Loading tool...

What Is コニックグラデーションジェネレーター?

コニックグラデーションジェネレーターは、中心点を囲んで色が移行するCSSグラデーションを作成します。線形や放射状ではなく、角度的に色が変化します。コニックグラデーションは中心点の周りを回転するため、カラーホイール、パイチャートのようなセグメント、時計の面、スムーズな色の移行を作成するのに最適です。このツールでは、3つの色を選択し、開始角度と中心点の位置を設定できます。生成されるCSS conic-gradient() コードは、開始色に戻るスムーズな角度的な移行を作成します。コニックグラデーションは、SVGやCanvasが必要となる視覚効果を実現できる強力なCSS機能であり、デザインを純粋なCSSとGPUアクセラレートで保持することができます。

Why Use コニックグラデーションジェネレーター?

  • 線形/放射状グラデーションでは不可能なスイープ角度の色変化を作成できます
  • 回転制御用に調整可能な開始角度
  • オフセンター効果用にカスタマイズできる中心位置
  • 装飾的な背景やデータ視覚化に最適です
  • 生産使用に適したクリーンな CSS 出力

Common Use Cases

色相環

コニックグラデーションを使用して虹色の背景を作成します。

パイチャート

ハードカラーストップを使用したシンプルな CSS のみのパイチャートを構築します。

装飾的な背景

セクションやカード用にユニークな角度グラデーションの背景を作成します。

ローディングスピナー

コニックグラデーションアークを使用して CSS のみのローディングスピナーを設計します。

Technical Guide

CSS conic-gradient() は中心点の周りを色が移行します。構文は: conic-gradient(from 角度 at posX posY, 色1, 色2, ..., 色1) です。「from」角度は開始位置を回転させます (デフォルト 0deg = 上向き)。明示的な角度ストップが指定されない限り、色は360°の範囲に均等に分布します。最初の色を最後のストップとして繰り返すと、シームレスなループを作成できます。パイチャートのような効果には、パーセントストップを使用します: conic-gradient(赤 0% 25%, 青 25% 50%, 緑 50% 75%, 黄 75%)。コニックグラデーションはChrome 69+、Firefox 83+、Safari 12.1+、Edge 79+でサポートされています。また、border-radius: 50% でマスクし、mask-image と組み合わせて複雑な形状を作成することもできます。

Tips & Best Practices

  • 1
    シームレスな円形遷移を作成するために、最初の色を最後のストップとして繰り返す
  • 2
    パイチャートセグメント用にハードストップ（同じパーセンテージ、2つの色）を使用します
  • 3
    border-radius: 50% と組み合わせて円形の色相環効果を作成する
  • 4
    「from」角度はグラデーション全体を回転させるため、アニメーション効果に便利です
  • 5
    複雑なパターンを作成するために、複数のコニックグラデーションを重ねる

Related Tools

カラーピッカー - free online tool

カラーピッカー

HEX、RGB、HSL、CMYK形式の出力に対応したインタラクティブなカラーピッカー。

🎨 Color Tools
カラーハーモニーウィール - free online tool

カラーハーモニーウィール

5つのハーモニータイプとビジュアル選択機能を備えたインタラクティブな色輪。

🎨 Color Tools
線形グラデーション生成ツール - free online tool

線形グラデーション生成ツール

カスタム色、角度、色の停止を使用したCSS線形グラデーションを作成します。

🎨 Color Tools
放射グラデーションジェネレーター - free online tool

放射グラデーションジェネレーター

カスタムの形状、位置、および色を持つCSS放射グラデーションを作成します。

🎨 Color Tools
CSS フィルタージェネレーター - free online tool

CSS フィルタージェネレーター

ぼかし、明るさ、コントラストなどのようなCSSフィルター効果を視覚的な操作で適用します。

🎨 CSS & Design

Frequently Asked Questions

Q コニックグラデーションとは何か?
コニックグラデーションは中心点を周りながら色が遷移するグラデーションで、時計の針のように角度的にスイープします。線形（直線）や放射状（中心から外側へ）のグラデーションとは異なります。
Q コニックグラデーションを使用してパイチャートを作成できますか?
はい！ハードカラーストップ（同じパーセンテージの2つの色）を使用してシャープなセグメントを作成します。例：conic-gradient(red 0% 30%, blue 30% 70%, green 70%)。
Q コニックグラデーションはよくサポートされていますか?
Chrome、Firefox、Safari、Edge を含むすべてのモダンブラウザでサポートされます。これは CSS Images Level 4 の機能であり、2020 年以降に広く採用されています。

About This Tool

コニックグラデーションジェネレーター is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.