Generador de gradiente CSS (linear, radial, conic)

Tres tipos de gradiente en CSS

Linear: los colores transicionan en línea recta a un ángulo. 0° apunta arriba, 90° derecha (lectura por defecto), 180° abajo. Lo más común para fondos, botones y heros.

Radial: los colores transicionan hacia fuera desde un punto central. Forma circular (default) o elíptica. Ideal para spotlights, soles, centros llamativos.

Conic: los colores rotan alrededor de un punto central, como una rueda de color. Menos común pero útil para gráficos circulares, esferas, spinners decorativos. Soportado en navegadores modernos desde 2020.

Paradas y sistema de porcentaje

Cada parada tiene color y posición de 0% a 100%. 0% es el inicio del gradiente, 100% el fin. Dos paradas dan un gradiente suave de dos colores. Añadir una tercera en medio crea mezcla tricolor o banda nítida según posicionamiento.

Para transiciones nítidas (sin mezcla) coloca dos paradas en la misma posición con colores distintos. Por ejemplo, '#000 50%, #fff 50%' crea un corte negro-blanco en la mitad. Así se hacen fondos 'a rayas'.

Rendimiento y accesibilidad

Los gradientes se renderizan nativamente sin requests HTTP, a diferencia de imágenes. Escalan infinitamente sin pérdida. Animables: transiciona background-position o anima paradas con custom properties.

Accesibilidad: no pongas texto sobre un gradiente complejo si el contraste varía. Usa overlay plano, asegura que la luminosidad media contraste con el texto, o testea con el contrast checker. WCAG AA exige 4.5:1 para texto normal, 3:1 para grande.