CSS 渐变生成器

可视化生成 CSS 线性、径向和锥形渐变。可添加多个颜色节点并复制 CSS。

工作台 · 中性环境
90° 

  




  


  
  

  
  
  
  

    
功能特性

    

      
      

        
        Linear / radial / conic
      

      
      

        
        Multiple color stops
      

      
      

        
        Angle / direction control
      

      
      

        
        Live preview & CSS code
      

      
    

  

  

  
  

    
使用方法

    

      
        
        
1. 选择渐变类型和角度，台面会全尺寸实时预览。

        
        
2. 拖动轨道上的手柄移动色标，点击轨道空白处添加（最多六个），或用色井和百分比输入框微调。

        
        
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 —— 可单独控制四个角，也可统一控制。可实时预览。...

      
      
      
        

          
        

        
CSS Flexbox 演练场

        
学习并体验 CSS Flexbox。调整容器属性即可看到布局实时变化。...

      
      
      
        

          
        

        
CSS Grid 生成器

        
可视化创建 CSS Grid 布局。设置行、列和间距，并复制生成的 CSS 与 HTML。...