🌈Generador de degradados CSS lineales con porcentajes

¿Qué es el Generador de Degradados CSS?

Los degradados dan a fondos, botones y overlays un aspecto mucho más rico que un color plano — pero recordar la sintaxis exacta de linear-gradient(), sus ángulos y posiciones de parada no siempre es intuitivo. Este generador de degradados CSS crea un degradado de 2 colores con vista previa en vivo y presets de dirección rápidos, y en el Modo 2 crea degradados multi-color y radiales con tantas paradas como necesites, sin tener que memorizar la sintaxis exacta de linear-gradient o radial-gradient.

¿Cómo se estructura un degradado lineal?

El ángulo determina la dirección: 0° apunta hacia arriba, y el ángulo aumenta en sentido horario (90° = hacia la derecha, 180° = hacia abajo, 270° = hacia la izquierda). Las posiciones de parada (Inicio% y Fin%) controlan en qué punto del recorrido cada color alcanza su intensidad máxima — por defecto 0% y 100%, pero ajustarlas permite comprimir o expandir la zona de transición.

Guía paso a paso: cómo crear tu degradado CSS

1) Selecciona el "Color Inicial" y el "Color Final". 2) Ajusta el "Ángulo del Degradado" o usa uno de los presets de dirección rápida (arriba, abajo, diagonal...). 3) Opcionalmente, ajusta las posiciones de inicio y fin de cada color para controlar dónde ocurre la transición. 4) Copia el código CSS generado directamente desde la vista previa en vivo. Si necesitas más de 2 colores o un efecto radial en vez de lineal, cambia al Modo 2: Multi-Color y Radial.

Degradados con múltiples colores

Un degradado no está limitado a 2 colores: puedes añadir tantas "paradas" como quieras, cada una con su propia posición. Esto permite crear transiciones más complejas y ricas, como los degradados multicolor que se ven en fondos de aplicaciones modernas o en ilustraciones tipo "mesh gradient" simplificado.

Degradados radiales frente a lineales

Mientras que un degradado lineal se mueve en línea recta según un ángulo, un degradado radial se expande desde un punto central hacia afuera, como ondas concéntricas — útil para efectos de foco de luz, viñetas, o fondos con sensación de profundidad. El Modo 2 te permite alternar entre ambos tipos y ajustar la forma (círculo o elipse) del radial.

Casos de uso: dónde aparecen los degradados en el diseño web

Los degradados se usan constantemente en fondos de secciones "hero" para dar profundidad sin recurrir a una imagen, en botones con efecto de brillo sutil, en overlays sobre imágenes para garantizar que el texto superpuesto sea legible, y en bordes o divisores decorativos que rompen la monotonía de un color plano. Si el degradado se combina con transparencia en alguno de sus colores, calcula primero el HEX de 8 dígitos correspondiente con la calculadora de opacidad de color HEX, y si el texto va a superponerse al degradado, verifica el contraste resultante con la calculadora de contraste de color accesibilidad WCAG.

Errores comunes al crear degradados CSS

El error más frecuente es elegir dos colores con matices muy distintos entre sí (por ejemplo, un rojo saturado y un verde saturado) sin un color intermedio que suavice la transición, generando una franja gris apagada en el punto medio — un problema conocido del espacio de color RGB estándar. Otro error habitual es olvidar declarar un color de fondo plano de respaldo antes del degradado, o usar demasiadas paradas de color en un degradado radial pequeño, lo que produce anillos de color visibles en lugar de una transición suave.

Compatibilidad de navegadores y consejos profesionales

Los degradados lineales y radiales de CSS tienen soporte universal en todos los navegadores modernos desde hace más de una década, sin necesidad de prefijos de proveedor. Un consejo profesional habitual: si notas "bandas" visibles en un degradado muy suave (un efecto llamado banding, más perceptible en pantallas de baja profundidad de color), añadir una tercera parada de color intermedia con una posición ligeramente distinta al 50% suele suavizar la transición perceptible. Otro consejo: para lograr degradados con aspecto más natural entre colores muy distintos, añade un tercer color de transición entre ambos en el Modo 2 en lugar de dejar que el navegador interpole directamente entre dos tonos opuestos del círculo cromático, lo que evita el efecto de "franja gris" descrito más arriba.

Preguntas Frecuentes (FAQ)