Generador de Degradados

Estos tres tipos de degradado CSS se diferencian en cómo se distribuye el color sobre un elemento. Un degradado lineal mezcla los colores en línea recta según un ángulo que defines entre 0 y 360 grados, ideal para fondos, botones y banners principales. Un degradado radial irradia el color hacia afuera desde un punto central, en forma de círculo o elipse, creando un efecto de foco de luz o resplandor. Un degradado cónico hace girar los colores alrededor de un punto central como una rueda de color, perfecto para gráficos circulares, indicadores de carga e interfaces de selección de color. Esta herramienta también ofrece degradados de malla (mesh), que superponen varias mezclas radiales para lograr ese aspecto suave y multidireccional tan habitual en las landing pages modernas. Puedes cambiar entre los cuatro estilos en el editor y ver la vista previa actualizarse al instante, para luego copiar el CSS correspondiente y que el diseño que ves sea exactamente el que se publica.

Una parada de color es un color concreto ubicado en un punto específico a lo largo de un degradado, y el navegador mezcla suavemente entre paradas consecutivas. Cada parada tiene dos ajustes clave: un valor de color y una posición, normalmente expresada como un porcentaje de 0 a 100 a lo largo de la línea del degradado. Dos paradas producen un simple desvanecido de dos colores, mientras que añadir más paradas te permite crear mezclas multicolor, arcoíris o paletas de marca. También puedes definir la opacidad de cada parada por separado para crear desvanecidos transparentes que dejen ver lo que hay detrás del elemento. Si activas el interruptor de paradas duras, la mezcla se desactiva por completo y las paradas adyacentes forman bandas de color nítidas, algo muy útil para rayas, banderas y bloques dúotono. En este generador puedes añadir tantas paradas como necesites, arrastrar cada una a una posición exacta y copiar el código resultante con un solo clic.

En CSS, la dirección de un degradado lineal se controla mediante un ángulo medido en grados. Cero grados hace que la mezcla apunte hacia arriba, 90 grados va de izquierda a derecha, 180 grados apunta hacia abajo y 270 grados va de derecha a izquierda, así que cualquier valor entre 0 y 360 te permite rotar la mezcla con precisión. También puedes usar direcciones con palabras clave como "to right" o "to bottom" en CSS puro, pero un ángulo numérico ofrece un control más fino. En esta herramienta ajustas el ángulo sobre un lienzo en vivo y ves el degradado rotar de inmediato, así que no hace falta adivinar qué valor coincide con el aspecto que buscas. Para los estilos lineal y cónico incluso puedes activar una opción de animación que rota el ángulo de forma continua para previsualizar el movimiento. Cuando quede como quieres, copia el código exacto en CSS, Tailwind o styled-components para tu proyecto.

Sí. Aunque lo habitual es dejar los degradados CSS como código en vivo para que se vean nítidos a cualquier tamaño y no añadan peso en imágenes, a veces necesitas un archivo plano. Este generador puede exportar tu degradado como imagen PNG, JPG o SVG, lo cual resulta útil cuando quieres un recurso de fondo para una herramienta de diseño, una presentación, un gráfico para redes sociales o una plataforma que no admite CSS puro. PNG y JPG te dan una imagen ráster de tamaño fijo, mientras que SVG mantiene el degradado como datos vectoriales escalables que se ven nítidos en pantallas de alta densidad. Para proyectos web, sin embargo, copiar el código en CSS, Tailwind, styled-components o variables CSS resulta más ligero y flexible porque el navegador lo renderiza de forma nativa. Crea tu degradado en el lienzo y luego elige exportarlo como código o como imagen según a dónde tenga que ir.

El bandeo es el escalonado visible que a veces se aprecia entre colores, cuando la mezcla parece formada por rayas en lugar de un desvanecido continuo. Suele ocurrir cuando dos paradas son muy distintas en tono o brillo y la pantalla tiene una profundidad de color limitada, por lo que los tonos intermedios se redondean a un conjunto reducido de valores. Para reducirlo, coloca tus paradas de color más cerca en tono, añade una parada intermedia entre ellas o elige colores con saltos de luminosidad más pequeños. Asegúrate también de no haber activado por accidente el interruptor de paradas duras, que elimina la mezcla de forma intencionada para crear bandas marcadas. Los degradados sutiles y de bajo contraste son los que más bandeo muestran, así que un poco más de contraste puede, paradójicamente, verse más suave. Usa la vista previa en vivo de este generador para probar la ubicación de las paradas, prueba los modos de vista previa sobre botón o tarjeta para juzgarlo en contexto, y copia el resultado más limpio cuando la mezcla se vea uniforme.