Generador de degradados
Crea degradados de varias capas: lineales, radiales y cónicos
Generador de degradados
Crea degradados de varias capas: lineales, radiales y cónicos
Consejo: Arrastra los controles de la vista previa para cambiar la dirección del degradado. Arrastra las paradas de la barra para moverlas y las pestañas de las capas para reordenarlas.
Código CSS
background-image + background-color
Cómo funciona el generador de degradados
Crea degradados CSS de varias capas: lineales, radiales y cónicos. Ajusta las paradas de color de forma visual y copia CSS listo para producción.
Degradados de varias capas
Apila varias capas de degradado y combínalas visualmente. Cada capa tiene su propio tipo, colores y ángulo. Combina degradados lineales, radiales y cónicos en un mismo elemento.
Paradas de color precisas
Añade, mueve y elimina paradas de color en una barra visual. Ajusta la posición y la opacidad de cada parada. El CSS se actualiza en tiempo real mientras arrastras.
Lineales, radiales y cónicos
Elige entre tres tipos de degradado para cada capa. Define el ángulo en los lineales, la forma y la posición en los radiales y el ángulo inicial en los cónicos. Mezcla tipos en distintas capas.
Copiar CSS
Copia en un clic el CSS completo del fondo con todas las capas. El resultado usa la sintaxis estándar de degradados CSS, compatible con todos los navegadores modernos.
Preguntas frecuentes
Los degradados lineales hacen la transición de colores a lo largo de una línea recta con un ángulo dado. Los radiales se expanden desde un punto central hacia fuera en forma de círculo o elipse. Los cónicos hacen girar los colores alrededor de un punto central, como un gráfico circular. Cada tipo crea un efecto visual distinto.
Sí. CSS permite apilar varios degradados en una sola propiedad background, separados por comas. Esta herramienta facilita añadir capas, reordenarlas y previsualizar el resultado combinado.
Una parada de color define un color en una posición concreta de la línea del degradado (de 0% a 100%). El navegador interpola suavemente entre paradas contiguas. Cuantas más paradas añadas, más control tendrás sobre las transiciones de color.
Sí. Los degradados CSS (lineales, radiales y cónicos) son compatibles con todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Los cónicos fueron los últimos en tener compatibilidad total y funcionan en todas partes desde 2020.