Generador de degradados CSS
Diseña un degradado de fondo de forma visual y copia CSS listo para usar. Arrastra las paradas de color por la barra, haz clic en la barra para añadir una parada, cambia el ángulo o el centro y haz transparentes los colores. El código incluye un color sólido de respaldo para navegadores antiguos.
Cómo usarla
- Elige lineal, radial o cónico, o parte de una plantilla o de un degradado aleatorio.
- Haz clic en una parada para editar su color, opacidad y posición; arrástrala o haz clic en la barra para añadir otra.
- Copia el CSS y pégalo en la regla del elemento.
Preguntas frecuentes
¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?
Un degradado lineal cambia de color a lo largo de una línea recta con el ángulo que elijas. Un degradado radial se expande desde un centro en forma de círculo o elipse. Un degradado cónico gira alrededor de un centro, como las agujas de un reloj, lo que sirve para ruedas de color y gráficos circulares.
¿Funcionan los degradados CSS en todos los navegadores?
Sí. Los degradados lineales, radiales y cónicos funcionan en todas las versiones actuales de Chrome, Edge, Firefox y Safari, sin prefijos. La primera línea de background es un color simple que solo usan navegadores muy antiguos.
¿Cómo hago rayas?
Pon dos paradas del mismo color al principio y al final de cada raya, para que el color cambie de golpe en vez de mezclarse, y activa Repetir. La última plantilla es un ejemplo.
🏷️ Generador de meta tags
🖼️ Generador de Open Graph
🔗 Generador de enlaces UTM
🔲 Generador de box-shadow CSS