Generador de degradados CSS

Cómo usar el generador de degradados CSS

Empieza por elegir el tipo. En un degradado lineal, los colores avanzan en línea recta y el control de ángulo, de 0 a 360°, define la dirección. En uno radial, los colores se expanden desde el centro y tú eliges la forma: circle (círculo) o ellipse (elipse, que sigue la proporción del elemento).

Después ajusta las paradas de color. El generador admite de 2 a 6 paradas, cada una con su selector de color y una posición de 0 a 100%. Añade una parada cuando necesites un tono intermedio y elimina las que no aporten nada. Si prefieres partir de algo hecho, aplica uno de los presets y ajústalo a tu gusto. La vista previa se actualiza con cada cambio, el botón de copiar te da la línea background: linear-gradient(...) lista para pegar en tu hoja de estilos, y también puedes descargar el degradado como imagen PNG para los lugares que no aceptan CSS, como presentaciones o gráficos para redes sociales.

La sintaxis de linear-gradient y radial-gradient

Un degradado CSS es una imagen que dibuja el navegador, así que va en background (o background-image), no en background-color. La forma lineal recibe una dirección opcional seguida de la lista de colores:

.hero { background: linear-gradient(135deg, #FF7F50 0%, #E2725B 100%); }

La forma radial recibe primero la figura y, si quieres, el punto central:

.badge { background: radial-gradient(circle at center, #FFD700 0%, #FFA500 100%); }

Sin dirección, el lineal va de arriba abajo; sin forma, el radial usa ellipse. La referencia completa de ambas funciones está en la documentación de MDN.

Ángulos y palabras clave de dirección

En CSS, 0deg apunta hacia arriba y los ángulos crecen en el sentido de las agujas del reloj: 90deg va a la derecha, 180deg hacia abajo y 270deg a la izquierda. Las palabras clave son equivalentes más legibles: to right equivale a 90deg y to bottom a 180deg.

La diferencia aparece en las diagonales. to bottom right no siempre es 135deg: el navegador calcula el ángulo para que las esquinas superior izquierda e inferior derecha reciban exactamente los colores de los extremos, así que cambia según la proporción del elemento. En un cuadrado da 135°; en un banner ancho queda más cerca de la horizontal. Usa la palabra clave cuando quieras que el degradado siga la forma de la caja, y un ángulo fijo cuando necesites la misma inclinación en elementos de distintos tamaños.

Paradas de color y cortes duros

Cada parada indica dónde un color alcanza toda su intensidad. Entre dos paradas el navegador interpola; antes de la primera y después de la última, el color se mantiene sólido. Acercar dos paradas acorta la transición y separarlas la suaviza.

Cuando dos paradas comparten posición, la transición desaparece y aparece un borde nítido, lo que en inglés se llama hard stop. Así se crean franjas y rayas solo con CSS:

.franjas { background: linear-gradient(90deg, #008080 0% 33%, #FAF9F6 33% 66%, #FF7F50 66% 100%); }

La sintaxis color inicio fin define una franja sólida en una sola parada. En el generador obtienes lo mismo colocando dos paradas en la misma posición. Para rayas que se repitan por todo el elemento, cambia a repeating-linear-gradient() y usa posiciones en píxeles.

Por qué algunos degradados se ven grises en el centro

Por defecto, el navegador mezcla los colores canal por canal en sRGB. Entre colores cercanos en el círculo cromático funciona bien, pero entre colores opuestos el centro pierde saturación. El caso clásico es amarillo (#FFFF00) con azul (#0000FF): el promedio exacto de los canales es rgb(128, 128, 128), es decir, #808080, un gris neutro justo en el centro.

Tienes dos soluciones. La primera es añadir una parada intermedia con un color vivo que elijas tú; el mezclador de colores te ayuda a encontrarlo comparando RGB, HSL y OKLCH. La segunda es pedirle al navegador que interpole en un espacio perceptual:

.banner { background: linear-gradient(in oklch, #FFFF00, #0000FF); }

En OKLCH, el tono recorre el círculo en lugar de atravesar el centro, y la transición pasa por verdes y cianes vivos. Las versiones actuales de los principales navegadores admiten esta sintaxis; si necesitas dar soporte a navegadores antiguos, declara antes una línea sin in oklch como alternativa. La guía de colores modernos en CSS explica OKLCH y las demás funciones nuevas.

Degradados sobre texto o imágenes: legibilidad

Un uso habitual es la superposición (overlay): un degradado translúcido sobre una foto para que el título tenga contraste. Como background acepta varias capas, la primera queda encima:

.portada { background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)), url("foto.jpg") center / cover; }

El detalle es que el contraste cambia a lo largo del degradado. Mide el color del texto contra el punto más claro de la zona donde está, no contra el promedio. Lleva los dos colores al verificador de contraste y comprueba que alcancen 4,5:1 para texto normal, el mínimo del nivel AA de las WCAG. Lo mismo vale para el texto relleno con degradado (background-clip: text): cada parte de las letras necesita contraste suficiente con el fondo, y conviene definir un color sólido de respaldo.

Buenas prácticas de rendimiento y accesibilidad

• Prefiere CSS a imágenes. Un degradado en código no hace peticiones extra y se ve nítido en cualquier resolución. Reserva el PNG para los sitios que no interpretan CSS.
• Anima con cuidado. Cambiar los colores de un degradado obliga al navegador a repintar el fondo en cada fotograma. Para efectos hover, superpón dos degradados y anima la opacity de un pseudoelemento.
• Evita las bandas visibles. Los degradados largos entre tonos muy parecidos pueden mostrar escalones (banding). Una parada intermedia o más diferencia entre los extremos suele resolverlo.
• No uses el degradado como única pista. Un degradado decorativo no debe transmitir información que solo llegue por el color, y el texto tiene que superar la prueba de contraste en toda su extensión.