Generador de degradados CSS

Establece la propiedad background (o background-image) en una función de gradiente. La más sencilla es un degradado lineal de dos colores: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — esto pinta una mezcla de izquierda a derecha del índigo al rosa. Elige tus colores y el ángulo arriba, luego copia la línea de fondo ya preparada directamente en tu hoja de estilos. No hace falta escribir la sintaxis a mano: el generador la construye mientras arrastras cada parada a su posición.

Un linear-gradient mezcla los colores a lo largo de una línea recta con el ángulo que elijas (por ejemplo, 90deg = de izquierda a derecha). Un radial-gradient mezcla hacia afuera desde un punto central en círculos o elipses, como un foco de luz. Un conic-gradient barre los colores alrededor de un punto central como las manecillas de un reloj, lo que lo hace ideal para ruedas de color y gráficos de sectores. Esta herramienta crea los tres tipos; cambia entre ellos con los botones Lineal / Radial / Cónico. La mayoría de generadores de gradientes gratuitos como el de fondos de Canva solo ofrecen gradientes lineales, y cssgradient.io no admite gradientes cónicos en absoluto.

Aplica un degradado a la propiedad background de cualquier elemento. Para un fondo de página completa prueba: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }. Como un degradado cuenta como una imagen, también puedes añadir background-attachment: fixed; para que permanezca fijo mientras la página se desplaza. Créalo visualmente arriba y copia el CSS. No necesitas Figma, Canva ni ninguna herramienta de diseño. Funciona igual en todos los navegadores modernos sin prefijos en 2026.

Agrega paradas de color adicionales, cada una con su propia posición. Haz clic en cualquier lugar de la barra de degradado (o en el botón + Añadir parada) para colocar una nueva parada, luego arrástrala donde quieras. Con tres colores quedaría así: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%). No hay límite real: añade tantas paradas como necesite tu diseño. A diferencia de coolors.co, que solo muestra paletas de colores sin el CSS real, o de Canva, que bloquea la edición de degradados detrás de una cuenta, aquí se genera CSS de producción con paradas ilimitadas de inmediato.

Para un degradado lineal, el primer valor es el ángulo: 0deg apunta hacia arriba, 90deg hacia la derecha, 180deg hacia abajo, 270deg hacia la izquierda. También puedes usar palabras clave como 'to right' o 'to bottom right', por lo que linear-gradient(to right, ...) es idéntico a linear-gradient(90deg, ...). Arrastra el control deslizante de ángulo o haz clic en una flecha de dirección arriba y el valor se actualiza en tiempo real. El CSS de salida se actualiza al instante para que puedas copiarlo y pegarlo directamente en cualquier hoja de estilos o framework.

En 2026, no. linear-gradient, radial-gradient y conic-gradient son compatibles sin prefijos en todos los navegadores actuales, por lo que un simple background: linear-gradient(...) es suficiente. Solo añadirías -webkit- para Safari/iOS muy antiguos (anteriores a 2017) o versiones heredadas de Android WebView. Marca 'Añadir prefijo -webkit-' en la salida CSS y la herramienta emite una línea de fallback correctamente convertida sobre la estándar. La conversión del ángulo (90deg se convierte en 270deg en la versión webkit) se gestiona automáticamente.

Usa las utilidades de gradiente: una clase de dirección junto con los colores from-, via- y to-, por ejemplo bg-gradient-to-r from-indigo-500 to-pink-500. Para colores exactos usa valores arbitrarios: bg-gradient-to-r from-[#6366f1] to-[#ec4899]. Cambia la salida a la pestaña Tailwind para copiar las clases de tu gradiente actual, incluyendo un valor arbitrario bg-[linear-gradient(...)] para degradados radiales y cónicos, para los que Tailwind no tiene un shorthand con nombre. La mayoría de recursos sobre gradientes de Tailwind no cubren este caso especial.

Haz clic en Descargar PNG. La herramienta pinta tu degradado exacto en un canvas HTML a 1600x900 y lo guarda como un archivo .png, ideal para fondo de diapositivas, banners para redes sociales o maquetas de diseño. Se renderiza completamente en tu navegador, por lo que nada se sube. A diferencia de TinyWow, que requiere subir el archivo a un servidor, o de Adobe Express, que pone la exportación PNG detrás de un muro de pago, aquí no hay riesgo para la privacidad ni coste alguno. ¿Necesitas otro tamaño? Escala o recorta el PNG en cualquier editor de imágenes después.

Haz clic en 'Desde imagen' y elige una foto. La herramienta lee los píxeles de forma local, encuentra los colores más comunes y genera un degradado a partir de ellos, una forma rápida de hacer coincidir una foto de marca o una imagen de producto. Tu imagen nunca sale de tu dispositivo; se analiza en el navegador y se descarta inmediatamente. A diferencia de Adobe Color o Coolors, que requieren una subida o una cuenta para extraer paletas, todo permanece privado en tu equipo. Luego puedes ajustar las paradas extraídas, cambiar el ángulo o cambiar a radial o cónico.

Un gradiente cónico rota sus colores alrededor de un punto central en lugar de a lo largo de una línea, de modo que la transición barre como la manecilla de un reloj. conic-gradient(from 0deg, red, yellow, green, blue, red) crea una rueda de color completa. Son ideales para gráficos de sectores, gráficos de dona, anillos de progreso, selectores de color y efectos de brillo angular. La compatibilidad con navegadores es sólida desde 2021 en Chrome, Firefox, Safari y Edge sin necesidad de prefijos. Selecciona Cónico arriba, establece el ángulo de inicio y la posición del centro, y experimenta. La mayoría de herramientas generadoras de gradientes no admiten el tipo cónico en absoluto.

Dale a una parada un valor alfa. Baja el control deslizante de Opacidad en una parada y el CSS cambia a rgba(). Por ejemplo, linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) va de transparente a negro al 60%, el clásico velo oscuro detrás del texto sobre una foto. Consejo: difumina entre el mismo color (de transparente a sólido de un mismo tono) para evitar un punto medio grisáceo que los navegadores producen al difuminar entre dos colores completamente transparentes distintos. La herramienta gestiona la salida rgba automáticamente cuando ajustas la opacidad de una parada.

El generador de gradientes de UtiloKit cubre todo lo que ofrecen esas herramientas — tipos de gradiente lineal, radial y cónico, editores de múltiples paradas, copia de código — más salida en Tailwind CSS, descarga PNG, extracción de degradado desde imagen, enlaces compartibles y soporte para gradientes animados. cssgradient.io carece de soporte para gradientes cónicos y no tiene salida Tailwind. El editor de gradientes de Colorzilla es una extensión del navegador y no exporta PNG ni Tailwind. Todo aquí funciona en tu navegador sin subidas, sin registro y sin anuncios que bloqueen funciones.

Sí. La herramienta es completamente responsive y funciona en cualquier navegador móvil moderno. Ábrela en Safari en iPhone o en Chrome en Android, crea tu degradado y copia el CSS directamente al portapapeles. Como todo se ejecuta del lado del cliente, no es necesario descargar nada y funciona incluso con conexiones móviles lentas una vez cargada la página. El editor de paradas basado en arrastre se adapta a la entrada táctil, por lo que crear degradados con múltiples paradas en un teléfono es muy sencillo.