Archipela / Dev / CSSグラデーション生成

🌈 CSSグラデーション生成

Linear（線形）・Radial（放射）・Conic（円錐）のグラデーションを視覚的に作成します。角度・形状・位置・カラーストップをスライダーで調整すると、background のCSSコードがリアルタイムに生成されます。すべての処理はブラウザ内で完結します。

deg 

        

          
        

      

    


    
    

    

      

        
📘 使い方

        
    
          
  1. 「グラデーションの種類」から Linear・Radial・Conic のいずれかを選びます。種類に応じて角度・形状・位置の設定欄が切り替わります。
    2. 
          
  2. 「カラーストップ」で各色（カラーピッカー）と位置（%）を調整します。「＋ 色を追加」で最大6個まで増やせます。
    3. 
          
  3. プレビューが即座に更新され、下の「生成されたCSS」に background のコードが表示されます。
    4. 
          
  4. 「CSSをコピー」でコードをクリップボードにコピーして、そのままスタイルシートに貼り付けられます。
    5. 
        

      

      

        
❓ よくある質問

        

          
Conic（円錐）グラデーションはどのブラウザで使えますか？
            
conic-gradient() はモダンブラウザ（Chrome・Edge・Firefox・Safari の新しめのバージョン）で利用できます。円グラフ風の背景やカラーホイールの表現に便利です。古い環境ではフォールバックの単色背景を併記すると安全です。

          
入力した色や設定はサーバーに送信されますか？
            
いいえ。グラデーションの生成はすべてお使いのブラウザ内（クライアントサイド）で計算されます。設定内容がサーバーへ送信・保存されることはありません。

          
カラーストップの位置は省略できますか？
            
本ツールでは分かりやすさのため全ストップに位置（%）を明記しています。CSSでは位置を省略すると自動で等間隔に配置されますが、明示しておくと意図した配色を再現しやすくなります。

          
背景以外にも使えますか？
            
生成されるのは background 値なので、background-image やボタン・カード・ヒーロー領域など幅広く利用できます。-webkit-background-clip: text と組み合わせれば文字のグラデーションも表現できます。