Cómo se usa
- Elige Lineal, Radial o Cónico en Tipo.
- Ajusta Ángulo para Lineal o Cónico. Para Radial, elige la Forma; para Radial y Cónico, elige la Posición.
- Introduce los colores hexadecimales en Paradas de color.
- Pulsa + Añadir parada de color si necesitas otro color.
- Pulsa Copiar CSS para copiar la declaración background: …; (o usa Ctrl/Cmd+Shift+C sin texto seleccionado). Con Copiar valor copias solo el degradado.
Ejemplos
Fondo para una tienda online
Lineal, 90° · #F97316 al 0% · #EC4899 al 50% · #7C3AED al 100%
background: linear-gradient(90deg, #F97316 0%, #EC4899 50%, #7C3AED 100%);
Resplandor sobre una foto de portada
Radial, círculo en el centro · #2451E8 al 0% con opacidad del 80% · #2451E8 al 100% con opacidad del 0%
background: radial-gradient(circle at center, rgba(36, 81, 232, 0.8) 0%, rgba(36, 81, 232, 0) 100%);
Franjas diagonales para un aviso
Lineal repetido, 45° · #FDE68A al 0% y al 10% · #92400E al 10% y al 20%
background: repeating-linear-gradient(45deg, #FDE68A 0%, #FDE68A 10%, #92400E 10%, #92400E 20%);
Consejos
- Elige colores exactos y comprueba el contraste con Códigos de colores HTML.
- Prueba el degradado en una página con el Editor HTML.
Preguntas frecuentes
¿Cuántos colores puedo usar en un degradado?
Puedes usar entre 2 y 8 paradas de color. No se puede eliminar una parada si solo quedan dos.
¿Puedo introducir colores RGB o HSL?
Los campos aceptan hexadecimal, no rgb(), hsl() ni nombres de colores. Puedes usar #RGB, #RGBA, #RRGGBB o #RRGGBBAA, con o sin #; el canal alfa se convierte en opacidad.
¿Cómo hago un degradado con un corte entre dos colores?
Pon las dos paradas en la misma posición, por ejemplo al 50%. El cambio entre esos colores será un corte, sin transición suave.
¿Por qué no cambia la vista previa al editar un valor?
Si un campo no es válido, se marca en rojo y se mantienen el CSS y la vista previa del último degradado válido. Usa grados enteros de 0 a 360 y porcentajes enteros de 0 a 100 para posición y opacidad.
¿Se guardan o se envían mis degradados?
El degradado se genera en tu navegador y su estado se guarda en localStorage para la próxima visita. Restablecer elimina ese estado guardado. Google Analytics recibe eventos de uso, pero no tus colores ni tu CSS.