Generador de Degradados
Crea el degradado perfecto para tu sitio, app o presentación: elige entre lineal, radial y cónico, agrega hasta seis colores con posición ajustable, gira el ángulo y mira el resultado en vivo en un área de vista previa grande. Cuando quede bien, copia el código CSS con un clic — o empieza desde uno de los doce predefinidos modernos y ajusta desde ahí.
Predefinidos
Código CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Ajusta los colores y posiciones, mira el resultado en vivo y copia el código listo para usar.
Uso responsable
Cómo comprobar el resultado
Una herramienta útil debe permitir comprobar su salida. Empieza con una prueba pequeña, conserva el original y solo entonces usa el resultado en producción. El escenario siguiente ayuda a detectar errores antes de copiar, descargar o compartir.
Prueba práctica
Crea un degradado de dos colores, copia el CSS y pruébalo en un elemento real, también en pantalla pequeña.
Qué no sustituye esta herramienta
El resultado depende de los datos y del navegador. Revisa campos, unidades y formato final; la herramienta no sustituye análisis profesional cuando la decisión tenga efectos legales, financieros, médicos o de seguridad.
Tratamiento de datos
El contenido principal se procesa en tu navegador y no se envía al servidor de UseHubTools. Los datos locales pueden permanecer hasta que limpies el navegador.
Contenido revisado el 11 de agosto de 2026.
Tres tipos de degradado
El lineal es el clásico de fondos y botones, con dirección controlada por el ángulo. El radial irradia desde el centro, genial para efectos de brillo. El cónico gira los colores alrededor del centro, ideal para gráficos de dona y efectos creativos — y puedes alternar entre los tres manteniendo los mismos colores.
Control fino de colores
Cada color del degradado tiene su propio selector y un control de posición de 0 a 100%, permitiendo transiciones suaves o cortes marcados. Agrega hasta seis paradas de color, quita las que no quieras y prueba el botón aleatorio cuando necesites inspiración.
Cómo usar
Elige el tipo (lineal, radial o cónico), ajusta el ángulo y define los colores — o haz clic en un predefinido para empezar completo. La vista previa se actualiza en tiempo real. Cuando te guste el resultado, haz clic en "Copiar CSS" y pégalo directo en tu hoja de estilos.
Preguntas frecuentes
¿El código funciona en cualquier sitio?
Sí. El código generado usa la sintaxis estándar de degradados de CSS, soportada por todos los navegadores modernos.
¿Cuántos colores puedo usar?
De dos a seis paradas de color, cada una con posición ajustable de 0 a 100%.
¿Puedo usar los degradados comercialmente?
Sí. Los degradados son definiciones de estilo sin restricciones de uso.
¿Cuál es la diferencia entre lineal, radial y cónico?
El lineal sigue una dirección recta (controlada por el ángulo), el radial irradia del centro hacia afuera y el cónico gira los colores alrededor del punto central.
Herramientas relacionadas
Editor de Vídeo Online
Corta, recorta, añade textos, filtros y transiciones. Exporta sin marca de agua.
AbrirEmbellecedor de Capturas
Agrega fondos, marcos, sombras y anotaciones. Exporta en 4K.
AbrirRemovedor de Fondo con IA
Elimina fondos de imágenes al instante con IA.
AbrirMockups 3D
Coloca tu captura en un iPhone 3D y gíralo libremente.
Abrir