Crear degradados CSS para la web
Qué hace este generador
Un degradado CSS funde dos o más colores a lo largo de una forma, y este generador convierte esa fusión en CSS listo para pegar, sin que tengas que escribir la sintaxis a mano. Eliges el tipo de degradado, añades paradas de color y la herramienta arma la regla background correspondiente —una función linear-gradient() o radial-gradient()— mientras una vista previa en vivo refleja cada cambio en el instante en que lo haces.
Cada parada de color tiene su propio color, su posición sobre el recorrido en porcentaje y su opacidad, así que decides con precisión dónde un tono da paso al siguiente. Los ajustes predefinidos te entregan una paleta terminada para retocar en lugar de un lienzo en blanco.
Cuándo conviene usarlo
Recurre a él cuando un relleno plano resulta demasiado sobrio: fondos destacados, botones, tarjetas, insignias y capas de tinte se ven mejor con una transición de color sutil. Los diseñadores lo aprovechan para prototipar un estilo en segundos; quienes programan lo usan para obtener la sintaxis exacta sin memorizar palabras clave de ángulo ni reglas de porcentaje.
También destaca cuando necesitas reconstruir un degradado ya existente: recréalo parada por parada, ajusta el ángulo y pega el resultado directamente en una hoja de estilos o en un styled-component.
Ejemplo: un degradado lineal
Supongamos que quieres un desvanecido diagonal de azul a morado. Fija el tipo en lineal, coloca una primera parada en 0% y una segunda en 100%, y establece el ángulo en 135deg. El resultado queda como background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);. Cambia a radial y esas mismas dos paradas se muestran como radial-gradient(circle, #3b82f6 0%, #8b5cf6 100%), expandiéndose desde el centro hacia afuera en lugar de recorrer una línea.
Tipos de degradado, paradas y casos límite
Los degradados lineales recorren una línea recta cuyo ángulo o dirección defines; los radiales se expanden desde un punto central con una forma (circle o ellipse), un tamaño como farthest-corner y una posición X/Y ajustable. Añadir más de dos paradas crea bandas multicolor, y situar dos paradas en la misma posición produce un corte de color brusco en vez de una fusión suave. Una opacidad inferior al 100% permite que el degradado descanse sobre una foto u otra capa. Cuando el diseño esté a punto, copia el CSS o descárgalo y llévalo a tu proyecto.