Generador de Gradientes

La herramienta de degradados permite crear gradientes CSS para interfaces, fondos, botones, gráficos y prototipos de diseño. Evita escribir manualmente cada valor de linear-gradient o radial-gradient, porque permite ajustar colores, puntos de transición, dirección, ángulo y transparencia mientras se ve el resultado. Es útil cuando el degradado debe respetar una paleta de marca, mantener texto legible o suavizar el paso entre estados visuales. El CSS generado es solo la parte técnica; la calidad depende de escoger colores con contraste suficiente y de usar el degradado como apoyo del contenido, no como ruido decorativo.

Los gradientes CSS son valores de imagen, no colores: linear-gradient(), radial-gradient() y conic-gradient() se resuelven como tokens <image> que el navegador rasteriza dentro de cualquier ranura de background-image, mask-image o border-image. La forma lineal toma un ángulo (0deg apunta hacia arriba, 90deg apunta a la derecha, incrementándose en sentido horario) o una palabra clave 'to <side>' que se calcula a partir de la diagonal del cuadro, seguida de una lista separada por comas de paradas de color con posiciones opcionales en porcentaje o longitud. La forma radial acepta una forma (circle | ellipse), una palabra clave de tamaño (closest-side, farthest-corner es la predeterminada) y un ancla 'at <position>'. La forma cónica barre las paradas alrededor de un centro comenzando en 'from <angle>' y está soportada en Chrome 69+, Safari 12.1+ y Firefox 83+.<br /><br />La interpolación de color usa sRGB por defecto, que es perceptualmente no uniforme y produce una banda gris opaca entre tonos distantes como el azul y el amarillo. CSS Color Level 4 introdujo espacios de color explícitos mediante la sintaxis 'in <colorspace>' — 'in oklch', 'in lab', 'in srgb-linear', 'in hsl longer hue' — para que las transiciones mantengan cromaticidad a través del espectro. Las bandas de color duro se producen al dar a dos paradas la misma posición ('red 50%, blue 50%') y las indicaciones de color desplazan el punto medio sin insertar una parada ('red, 20%, blue').<br /><br />Cuando un gradiente necesita salir del pipeline CSS, Canvas expone las mismas primitivas: CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1), createRadialGradient(x0, y0, r0, x1, y1, r1) y createConicGradient(startAngle, x, y) devuelven objetos CanvasGradient que aceptan addColorStop(offset, color) y pueden asignarse a fillStyle antes de exportar mediante toDataURL('image/png'). SVG ofrece los equivalentes de marcado <linearGradient> y <radialGradient> con valores de spreadMethod 'pad' (predeterminado), 'reflect' y 'repeat' para el comportamiento de mosaico.

• Forma lineal: linear-gradient(<angle> | to <side-or-corner>, <color-stop>+) — 0deg apunta hacia arriba, incrementa en sentido horario; 'to bottom right' se calcula según las dimensiones del cuadro, no como un 135deg literal
• Forma radial: radial-gradient([<shape> <size>]? at <position>, <stops>) — palabras clave de tamaño closest-side, closest-corner, farthest-side, farthest-corner (predeterminado)
• Forma cónica: conic-gradient(from <angle> at <position>, <stops>) — barre alrededor del centro; Chrome 69+, Safari 12.1+, Firefox 83+
• Interpolación de color: CSS Color Level 4 'in oklch | lab | srgb-linear | hsl shorter|longer hue' anula el valor predeterminado de sRGB perceptualmente no uniforme que causa bandas grises intermedias entre tonos distantes
• Paradas duras e indicaciones: dos paradas en la misma posición ('red 50%, blue 50%') crean una banda nítida; un porcentaje aislado ('red, 20%, blue') es una indicación de color que mueve el punto de mezcla al 50%
• API Canvas: createLinearGradient(x0,y0,x1,y1), createRadialGradient(x0,y0,r0,x1,y1,r1), createConicGradient(angle,x,y) devuelven CanvasGradient; addColorStop(offset, color) y luego se asigna a fillStyle
• Equivalentes SVG: <linearGradient> y <radialGradient> con spreadMethod='pad'|'reflect'|'repeat' controlan el mosaico más allá de los límites del gradiente