Generador de Gradientes CSS

Crea gradientes CSS lineales y radiales con vista previa en vivo y copia el código.


  

  

    
    
  



    

    

      
Crea gradientes CSS preciosos en segundos con este generador de gradientes online y gratuito. Elige dos colores, selecciona lineal o radial, arrastra el control de ángulo y observa cómo el gradiente se actualiza en vivo. Cuando quede a tu gusto, copia la propiedad background de CSS lista para pegar: todo se ejecuta en tu navegador, sin nada que instalar.

      

        
¿Qué es un generador de gradientes CSS?

        
Un generador de gradientes CSS es una herramienta visual que crea el valor linear-gradient() o radial-gradient() que colocas en la propiedad background de CSS. En lugar de adivinar los puntos de color y los ángulos a mano, eliges los colores con un selector, ajustas la dirección y la herramienta escribe el CSS exacto por ti, con una vista previa en vivo del resultado.

        
      

      

        
Cómo generar un gradiente CSS

        
Elige entre un gradiente lineal (los colores se mezclan a lo largo de una línea recta en un ángulo determinado) o un gradiente radial (los colores se irradian desde el centro). Define los colores inicial y final, ajusta el ángulo en los gradientes lineales y copia la regla de background generada en tu hoja de estilos.

        
  1. Elige el primer y el segundo color con las muestras, o escribe un código HEX.
  2. Selecciona Lineal o Radial como tipo de gradiente.
  3. Arrastra el control de ángulo para definir la dirección de un gradiente lineal.
  4. Pulsa Aleatorio para inspirarte al instante y luego haz clic en Copiar CSS.

      

      

        
¿Por qué usar este generador de gradientes?

        
  • 100% gratis, sin anuncios, sin registro y sin límites.
  • La vista previa en vivo se actualiza al instante mientras ajustas colores y ángulo.
  • Admite gradientes CSS tanto lineales como radiales.
  • Un solo clic copia una regla de background lista para pegar.
  • Se ejecuta por completo en tu navegador: tu diseño nunca sale de tu dispositivo.

      

      

        
Preguntas frecuentes

        

          
¿Cuál es la diferencia entre un gradiente lineal y uno radial?

          
Un gradiente lineal mezcla los colores a lo largo de una línea recta en el ángulo que elijas, mientras que un gradiente radial mezcla los colores hacia afuera desde un punto central, con forma circular. Usa el selector de tipo para alternar entre ellos y comparar la vista previa.

        

        

          
¿Cómo uso el gradiente CSS generado?

          
Copia la regla generada y pégala en la propiedad background del elemento que quieras estilizar, por ejemplo: background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);

        

        

          
¿Los gradientes CSS funcionan en todos los navegadores?

          
Sí. Las funciones estándar linear-gradient() y radial-gradient() son compatibles con todos los navegadores modernos, así que el código que genera esta herramienta funciona en todas partes sin prefijos de fabricante.

        

        

          
¿Puedo introducir códigos de color HEX directamente?

          
Sí. Puedes escribir un valor HEX como #4f46e5 en cualquiera de los campos de color, o usar el selector de color para elegir visualmente. Las abreviaturas de tres dígitos como #f0c se expanden automáticamente.