Generador de degradados CSS: lineales, radiales y cónicos, con vista previa en vivo

Usa una función de degradado como imagen de fondo: background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); El primer argumento es la dirección (un ángulo o palabras clave como to right), seguido de las paradas de color, cada una un color con una posición opcional. radial-gradient() se extiende desde un punto y conic-gradient() gira a su alrededor. Los degradados son imágenes, así que van en background o background-image, no en background-color.

Es la dirección hacia la que avanza el degradado, medida en el sentido de las agujas del reloj desde arriba: 0deg va de abajo arriba, 90deg de izquierda a derecha, 180deg de arriba abajo (el valor por defecto si lo omites) y 270deg de derecha a izquierda. Es distinto de la convención matemática, en la que 0 grados apunta a la derecha, y por eso los degradados de algunas herramientas de diseño salen girados.

Un degradado lineal cambia de color a lo largo de una línea recta. Un degradado radial cambia de color hacia fuera desde un punto central, como un círculo o una elipse, y su palabra clave de tamaño (closest-side, farthest-corner, etc.) controla dónde cae la última parada. Un degradado cónico cambia de color alrededor de un punto central, como las agujas de un reloj, lo que lo convierte en la herramienta para gráficos circulares, ruedas de color e indicadores de carga.

Pon dos paradas en la misma posición para obtener un borde nítido en lugar de una transición y repite el patrón. Por ejemplo, repeating-linear-gradient(45deg, #244b3f 0 10px, #e8f0ec 10px 20px) crea rayas diagonales de 10px de ancho. La plantilla Rayas de esta página hace lo mismo con porcentajes. En un degradado repetido, la distancia entre la primera y la última parada es la longitud de cada repetición.

Para degradados lineales sencillos de dos o tres colores, usa las utilidades de Tailwind, como bg-gradient-to-r from-indigo-600 to-cyan-500 (bg-linear-to-r en Tailwind v4). Para todo lo demás (ángulos, degradados radiales o cónicos, paradas con opacidad), usa un valor arbitrario: la clase que se genera aquí, como bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%)], donde los guiones bajos sustituyen a los espacios. Los valores arbitrarios muy largos son difíciles de leer, así que plantéate moverlos a la configuración de tu tema.

Los navegadores interpolan los degradados en sRGB por defecto, y la línea recta entre dos colores saturados y casi opuestos (de azul a amarillo, de rojo a verde) pasa por un gris desaturado. Añade una parada intermedia con un color de transición limpio o, en los navegadores actuales, interpola en un espacio perceptual: linear-gradient(90deg in oklch, blue, yellow). Las bandas en degradados largos y sutiles son otro problema, causado por el color de 8 bits; un poco de textura de ruido sobre el degradado las disimula.