Generador de Degradados CSS

Crea degradados CSS lineales, radiales y cónicos visualmente. Añade múltiples puntos de color y copia el CSS.

Estudio · entorno neutro
90° 

  




  


  
  

  
  
  
  

    
Características

    

      
      

        
        Linear / radial / conic
      

      
      

        
        Multiple color stops
      

      
      

        
        Angle / direction control
      

      
      

        
        Live preview & CSS code
      

      
    

  

  

  
  

    
Cómo Usar

    

      
        
        
1. Elige el tipo de degradado y el ángulo; la superficie lo previsualiza a tamaño completo.

        
        
2. Arrastra los tiradores para mover paradas, haz clic en un hueco de la pista para añadir una (hasta seis) o afina con los pocillos de color y los campos de porcentaje.

        
        
3. Copia el CSS generado — compruébalo sobre el damero para detectar bandas sobre transparencias.

        
      
    

  


  
  
  
  

    
Preguntas Frecuentes

    
    

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

    

    
  

  

  
  
  

    
Herramientas Relacionadas

    

      
      
        

          
        

        
Generador de Box Shadow CSS

        
Genera visualmente propiedades CSS box-shadow con controles deslizantes. Observa...

      
      
      
        

          
        

        
Generador de Border Radius CSS

        
Diseña visualmente CSS border-radius — controla las cuatro esquinas individualme...

      
      
      
        

          
        

        
Playground de CSS Flexbox

        
Aprende y experimenta con CSS Flexbox. Ajusta las propiedades del contenedor y o...

      
      
      
        

          
        

        
Generador de Grid CSS

        
Crea visualmente diseños de CSS Grid. Configura filas, columnas, espaciado y cop...