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

CSSの線形、放射状、円錐グラデーションを視覚的に作成します。複数のカラーストップを追加してCSSをコピーできます。

スタジオ · ニュートラル環境
90° 

  




  


  
  

  
  
  
  

    
機能

    

      
      

        
        Linear / radial / conic
      

      
      

        
        Multiple color stops
      

      
      

        
        Angle / direction control
      

      
      

        
        Live preview & CSS code
      

      
    

  

  

  
  

    
使い方

    

      
        
        
1. グラデーションの種類と角度を選ぶと、ステージにフルサイズでプレビューされます。

        
        
2. トラック上のハンドルをドラッグしてストップを移動、空いた場所をクリックして追加（最大 6 個）。カラーウェルとパーセント入力で微調整もできます。

        
        
3. 生成された CSS をコピーします — 市松の下地で透過部分の縞（バンディング）も確認できます。

        
      
    

  


  
  
  
  

    
よくある質問

    
    

      What types of gradients does CSS support?
      
CSS supports linear, radial, and conic gradients, each with different visual effects.

    

    
  

  

  
  
  

    
関連ツール

    

      
      
        

          
        

        
CSSボックスシャドウ生成

        
スライダーでCSS box-shadowプロパティを視覚的に生成します。リアルタイムプレビューを確認してCSSコードをコピーできます。...

      
      
      
        

          
        

        
CSSボーダーラジアス生成

        
CSS border-radiusを視覚的に作成 — 4つの角を個別にまたは一括で制御できます。リアルタイムプレビュー付き。...

      
      
      
        

          
        

        
CSS Flexboxプレイグラウンド

        
CSS Flexboxを学習・実験できます。コンテナのプロパティを調整して、レイアウトの変化をリアルタイムで確認できます。...

      
      
      
        

          
        

        
CSSグリッド生成

        
CSSグリッドレイアウトを視覚的に作成します。行、列、間隔を設定して、生成されたCSSとHTMLをコピーできます。...