Generador de degradados
Ajusta degradados CSS de forma visual en el navegador. Admite linear, radial, conic y sus variantes repeating, con controles en un mismo panel para editar tipo, ángulo, forma, punto central, paradas de color y opacidad, siempre con vista previa en tiempo real. Es útil para fondos de portada, brillos en botones y tarjetas, profundidad en modo oscuro, banners de campaña y transiciones de color dentro de un sistema de diseño. La salida es CSS listo para copiar, los colores y presets no se suben, y todo el renderizado se realiza localmente.
- Ajusta tipo de degradado, ángulo, forma, punto central y paradas de color con controles visuales y vista previa en tiempo real
- Incluye una biblioteca amplia de presets para colores de marca, modo oscuro, superficies de vidrio, neón y patrones repetidos decorativos
- Genera CSS listo para copiar, con opción de añadir un color fallback para navegadores antiguos y entornos limitados
- Cada parada de color admite alpha y posición independiente, desde transiciones de dos colores hasta fondos con varias capas
- La edición ocurre por completo en el navegador, adecuada para visuales de marca no publicados y diseños confidenciales
background: #6366f1; background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Resumen
Reúne los parámetros importantes de un degradado en un solo panel, sin alternar entre selector de color, editor de código y ventana de vista previa. Cuando el resultado encaja, puedes copiar el CSS y volver directamente al proyecto.
- 01
Seis tipos de degradado en un panel
linear, radial, conic y sus variantes repeating se editan desde el mismo panel de control. Al cambiar de estilo, puedes mantener una lógica de parámetros parecida y seguir ajustando.
- 02
Control preciso de paradas de color
Cada parada permite definir color HEX, posición en porcentaje y opacidad, para pasar con naturalidad de mezclas simples de dos colores a fondos con varias paradas.
- 03
Ángulo y punto central coordinados
Los degradados lineales y cónicos tienen deslizador de ángulo y accesos rápidos a ángulos habituales. Los radiales y cónicos también permiten ajustar el centro para alinear el foco visual con el layout.
- 04
Presets para empezar rápido
Más de 70 presets seleccionados cubren colores de marca, temas oscuros, superficies de vidrio, neón, pasteles suaves y texturas repetidas, listos para aplicar y refinar.
- 05
Salida CSS con compatibilidad en mente
Puedes anteponer una declaración background de color sólido para que navegadores antiguos, clientes de correo o exportaciones a PDF muestren un fondo razonable.
- 06
Vista previa en vivo con transparencia
El área de vista previa usa un patrón de tablero detrás del degradado, lo que facilita evaluar cómo se ven las paradas semitransparentes antes de colocarlas sobre un fondo real.
Cómo usarla
Del concepto al CSS listo para producción, todo se resuelve en un solo panel. Sirve tanto para probar ideas rápido como para pulir el resultado entre el archivo de diseño y el código de estilos.
- 01
Elige primero el tipo de degradado. Los fondos de portada suelen empezar bien con linear, mientras que los brillos suaves funcionan mejor con radial.
- 02
Ajusta ángulo, forma o punto central para que el foco visual encaje con el layout y el recorrido de lectura.
- 03
Edita el color, la posición y la opacidad de cada parada, y añade o elimina paradas según evolucione el diseño.
- 04
Revisa la vista previa, incluidas las zonas semitransparentes, y confirma que el texto y los iconos encima siguen siendo legibles.
- 05
Si necesitas mayor compatibilidad, activa el color fallback y copia el CSS en tu hoja de estilos, componente o token de tema.
Detalles
Los degradados aparecen desde la primera vista de una landing page hasta estados sutiles de componentes. No solo deben verse bien: también deben reproducirse de forma estable entre diseño e ingeniería, temas claros y oscuros, y superficies sensibles a la accesibilidad.
- Admite toda la familia de degradados CSS: linear-gradient, radial-gradient, conic-gradient y sus variantes repeating
- Posiciones porcentuales precisas y valores alpha de 0 a 100 para reproducir transiciones delicadas de archivos de diseño
- Los degradados lineales y cónicos ofrecen accesos rápidos a ángulos habituales, sin volver a escribir 45, 90 o 135 grados
- Los degradados radiales y cónicos permiten controlar el punto central para alinear el foco visual con el layout cercano
- Los presets se filtran por tipo de degradado, de modo que al cambiar de estilo solo aparecen opciones relevantes
- La generación aleatoria ayuda a explorar nuevas combinaciones de color después de fijar el tipo y la dirección del degradado
- La salida con fallback es útil para degradación accesible, plantillas de correo, PDF y otros renderizadores limitados
- El tablero bajo la vista previa facilita revisar degradados semitransparentes
- Todos los cálculos se realizan en el navegador, por lo que visuales de marca no publicados y recursos internos no salen del equipo
- La salida es CSS limpio, usable en valores arbitrarios de Tailwind, variables CSS, mixins Sass y bibliotecas de componentes
- Combina bien con conversión de color, comprobación de contraste y generación de paletas para crear un flujo de color completo
Casos de uso
Un degradado bien ajustado suele definir la primera impresión de un producto. La misma lógica visual también debe poder extenderse desde fondos de portada hasta estados de componentes y materiales de campaña.
-
Fondos de portada para sitios de marketing
Un degradado de baja saturación con varias paradas mantiene el reconocimiento de marca sin perjudicar la lectura del título, el subtítulo y los botones.
-
Botones y estados interactivos
Cuando primary, hover, active y selected nacen de la misma plantilla de degradado, la profundidad y la respuesta visual de los componentes se sienten más coherentes.
-
Tarjetas y agrupación de información
Aplicar un degradado sutil en tarjetas, paneles de datos y áreas de estado puede crear agrupaciones más naturales que un bloque plano, sin quitar atención al contenido.
-
Profundidad en modo oscuro
En temas oscuros, un degradado de baja luminosidad con varias paradas puede sustituir el negro plano, dar más aire a la interfaz y reducir peso visual.
-
Campañas y temas de temporada
Las páginas de campaña y los banners de temporada suelen necesitar energía cromática expresiva pero controlada. Los presets y la generación aleatoria ayudan a encontrar una dirección en poco tiempo.
-
Sistema de marca y tokens de diseño
Los degradados estables pueden convertirse en variables CSS o tokens de diseño, para que distintas superficies del producto compartan un mismo lenguaje de marca sin rehacerlo cada vez.
-
Dashboards y contenedores de gráficos
Un degradado ligero en contenedores de gráficos y tarjetas KPI puede reforzar la agrupación y la legibilidad sin robar protagonismo a los datos.
-
Plantillas de correo y recursos exportados
En correos, PDF y pósteres, la salida con fallback permite que renderizadores limitados muestren un color sólido razonable y que los entornos compatibles conserven el degradado.
-
Prototipos y demos de alta fidelidad
Durante la exploración, los presets ayudan a montar una dirección visual creíble con rapidez; cuando se aprueba, los parámetros pueden pasar a tokens de diseño formales.
-
Inicio de sesión, estados vacíos y páginas de error
Estas pantallas suelen tener mucho espacio en blanco y pocos puntos de anclaje visual. Un degradado contenido añade atmósfera sin tapar formularios, mensajes ni llamadas a la acción.
Ver también
Si el degradado parte de colores de marca o valores de token existentes, conviene usar primero Conversor de colores para normalizar cada parada antes de afinar la transición. Cuando el degradado queda debajo de títulos, textos de botones o logotipos, revisa la combinación real de primer plano y fondo en Comprobador de contraste antes de publicar, para confirmar que además de verse bien también se lee bien.
Buenas prácticas
Un degradado parece una decisión visual, pero para sostenerlo en producción hay que considerar legibilidad, rendimiento, adaptación de tema y mantenibilidad al mismo tiempo.
- Toda zona que soporte texto debe mantener contraste suficiente. El degradado debe servir al contenido, no competir con él.
- En la mayoría de interfaces bastan de 2 a 4 paradas. Demasiadas paradas pueden producir bandas, ruido visual y más coste de mantenimiento.
- En modo oscuro, reduce saturación u opacidad para que las franjas brillantes no dominen el contenido en primer plano.
- En superficies interactivas, deja suficiente margen cromático para que hover, active y disabled puedan derivarse del mismo degradado.
- Convierte los degradados definitivos en variables CSS o tokens de diseño, en lugar de pegar la cadena completa en muchos componentes.
- Comprueba los puntos centrales de degradados radiales y cónicos en breakpoints habituales, para evitar que el foco visual se desplace mal en móvil.
- En escenarios de degradación accesible puedes usar un color fallback, pero aun así debes revisar la legibilidad cuando el degradado se ignore.
- En trabajo de equipo, documenta dirección y posiciones de paradas en el sistema de diseño para evitar deriva de valores durante el traspaso.
Limitaciones
El renderizado final depende del navegador, la pantalla y el CSS que rodea al elemento. Aunque la sintaxis sea estándar, no se puede garantizar una apariencia percibida idéntica.
- Los navegadores difieren en gestión de color, suavizado y renderizado subpíxel, así que los degradados complejos pueden mostrar pequeñas diferencias.
- Los degradados repeating de alta frecuencia y las capas grandes con muchas paradas aumentan el coste de pintado, sobre todo en equipos modestos y tamaños de pantalla completa.
- Esta herramienta se centra en efectos visuales CSS; no incluye compresión de imágenes, exportación bitmap ni gestión de perfiles de color.
- Un degradado ajustado para modo claro suele requerir una revisión específica para modo oscuro, en lugar de reutilizarse por defecto.
- Si el proyecto exige estilos tokenizados, asigna la salida a nombres de token aprobados en lugar de pegar cadenas CSS literales.
- En interfaces sensibles a la accesibilidad, valida la combinación de color de primer plano y fondo con una herramienta dedicada de contraste.
- Para impresión o gran formato, la tinta, el papel y el proceso cambian el resultado percibido, por lo que sigue siendo necesario revisar una prueba real.
Preguntas frecuentes
Estas son preguntas habituales al usar degradados en implementación frontend y colaboración de diseño, especialmente sobre uso, compatibilidad, tratamiento de datos y límites reales.
¿El CSS generado se puede usar directamente en producción?
Sí. La salida sigue la sintaxis estándar de degradados CSS y puede colocarse en hojas de estilo, estilos de componentes, valores arbitrarios de Tailwind o variables CSS.
¿Cuándo conviene activar el color fallback?
Actívalo si el destino puede ser un navegador antiguo, un cliente de correo, una exportación a PDF o un entorno que quizá no soporte esa sintaxis. Primero emite un background de color sólido y luego superpone el degradado.
¿Dónde son útiles los degradados repeating?
Funcionan bien para rayas, texturas circulares y barridos decorativos, y pueden sustituir recursos bitmap por CSS escalable y responsive.
¿Tener más paradas de color siempre es mejor?
No. En la mayoría de interfaces bastan de 2 a 4 paradas. Añadir demasiadas puede causar bandas, ruido visual y un mantenimiento más difícil.
¿Mis colores se suben mientras edito?
No. El renderizado, la vista previa y la exportación se realizan localmente en el navegador, por lo que es adecuado para visuales de marca no publicados y diseños confidenciales.
¿Cómo mantengo el mismo degradado entre varias páginas?
Conviene convertir el CSS final en una variable compartida o token de diseño y referenciarlo desde componentes reutilizables, en lugar de repetir la cadena completa en varios archivos.
¿Se puede usar con Tailwind?
Sí. La salida puede colocarse en la sintaxis de valores arbitrarios de Tailwind, o registrarse en backgroundImage o en extensiones de theme dentro de tailwind.config.
¿Por qué la vista previa se ve un poco distinta al archivo de diseño?
Suele deberse a perfiles de color, gama de la pantalla, calibración de brillo u otros estilos superpuestos en la página final. En casos importantes, conviene revisarlo en el dispositivo de destino.
¿La generación aleatoria descarta mi configuración actual?
Normalmente mantiene el tipo y la dirección del degradado, y solo reemplaza las paradas de color. Si el resultado actual es importante, copia antes el CSS como respaldo.
¿Puedo reutilizar el mismo degradado en modo claro y oscuro?
Se puede, pero normalmente merece la pena ajustar una segunda versión para modo oscuro, porque los mismos colores cambian mucho según la luminancia del fondo.
¿Dónde debería colocar el centro de un degradado radial o cónico?
Depende del layout. Si quieres un foco desplazado, prueba alrededor del 30% al 40% en el eje correspondiente. Para un brillo más suave y centrado, suele ser más estable mantenerlo cerca del 50%.
¿Los degradados afectan al rendimiento de la página?
Los degradados simples de 2 o 3 paradas suelen ser ligeros. Los repeating grandes y con muchas paradas pueden elevar el coste de composición en equipos modestos o zonas con scroll, así que en esos casos conviene limitar su uso o convertirlos en imagen.
Herramientas relacionadas
El degradado es solo una parte de un flujo de color más amplio. Puedes combinarlo con conversión de color, generación de paletas y comprobación de contraste para pasar de valores normalizados a escalas, validación accesible y aplicación final en la interfaz.