01
Cuándo es útil esta herramienta
Usa esto para crear un fondo web de dos colores o un acento de tarjeta. Elige colores de inicio y fin, un tipo lineal o radial y un ángulo para obtener una vista previa y el CSS.
Generador de degradados
Genera código de linear-gradient o radial-gradient con una vista previa en vivo.
Generador de degradados
Un resultado del lado del navegador para planificación y consulta.
Qué revisar antes de usarlo
02
Cómo se genera el resultado
El modo lineal crea un linear-gradient con el ángulo introducido; el modo radial crea un radial-gradient circular. El navegador renderiza los colores intermedios entre las dos paradas.
03
Ejemplo práctico e interpretación
Configura de #3366FF a #FF6655 con 90 grados para una declaración de fondo de izquierda a derecha. Cópialo en el componente real y vuelve a comprobar el contraste de cualquier texto colocado encima.
04
Alcance y limitaciones
El generador usa dos paradas de color y no puede eliminar las diferencias de interpolación de color entre navegadores. Añade paradas complejas, transiciones alpha o colores de amplio gamut en un editor completo.
Preguntas frecuentes
¿Cómo traslado un color desde el generador de degradados a otra aplicación?
Usa el botón de copiar debajo del resultado para copiar texto CSS, HEX o HSL. Confirma que la aplicación de destino interpreta el mismo formato de color.
¿El color de pantalla del generador de degradados coincide con la impresión?
No de forma automática. Las pantallas RGB emisivas y el papel y la tinta reflectivos usan gamuts y modelos de mezcla diferentes, por eso aún se necesitan perfiles de impresión y pruebas.
¿Puedo aprobar un token de diseño solo con el generador de degradados?
Úsalo como candidato, luego prueba el fondo real, el modo oscuro, los estados de interacción y el contraste del texto antes de nombrar y aprobar un token.