Acerca de este problema HTML
La función linear-gradient() pasó por varias revisiones de sintaxis durante la estandarización de CSS. Los primeros borradores y las implementaciones con prefijo de proveedor (como -webkit-linear-gradient()) usaban palabras clave de dirección sin prefijo como top, bottom left, etc., donde la palabra clave indicaba el punto de inicio del degradado. El estándar final, definido en las especificaciones CSS Images Module Level 3 y Level 4, cambió esto para que las palabras clave de dirección usen el prefijo to e indiquen el punto final del degradado. Por ejemplo, el antiguo linear-gradient(top, #fff, #000) significaba “empezar desde arriba e ir hacia abajo”, mientras que el equivalente moderno correcto es linear-gradient(to bottom, #fff, #000).
Esto importa porque la sintaxis antigua sin to no es CSS válido según la especificación actual. Aunque algunos navegadores pueden seguir interpretando la sintaxis heredada por compatibilidad hacia atrás, depender de ella es arriesgado — el comportamiento puede variar entre navegadores y activará errores de validación. Usar CSS que cumple con los estándares garantiza un renderizado consistente y compatibilidad futura.
Cómo solucionarlo
Reemplaza la palabra clave de dirección sin prefijo con la sintaxis to correcta. Ten en cuenta que el significado de la dirección se invierte: la sintaxis antigua especificaba dónde empezaba el degradado, mientras que la nueva sintaxis especifica hacia dónde va.
Aquí tienes una correspondencia rápida de sintaxis antigua a nueva:
| Antigua (inválida) | Nueva (válida) | Equivalente en ángulo |
|---|---|---|
top |
to bottom |
180deg |
bottom |
to top |
0deg |
left |
to right |
90deg |
right |
to left |
270deg |
top left |
to bottom right |
N/A (usa sintaxis to) |
Importante: Nota que top en la sintaxis antigua significa “empezar desde arriba, ir hacia abajo”. Así que el equivalente moderno es to bottom, no to top. Si el mensaje del validador dice que el argumento debería ser to top, significa que escribiste top — pero asegúrate de entender en qué dirección debería ir realmente tu degradado antes de reemplazarlo a ciegas. Si realmente quieres que el degradado vaya hacia arriba, usa to top. Si quieres que vaya desde arriba hacia abajo, usa to bottom.
Si no especificas una dirección en absoluto, linear-gradient() por defecto usa to bottom (de arriba a abajo), que es a menudo lo que quieres.
Ejemplos
Inválido: palabra clave de dirección sin prefijo
<div style="background: linear-gradient(top, #ffffff, #000000);">
Contenido
</div>
La palabra clave sin prefijo top no es válida en la sintaxis estándar de linear-gradient() y activará el error del validador.
Corregido: usando la palabra clave to
<div style="background: linear-gradient(to bottom, #ffffff, #000000);">
Contenido
</div>
Dado que el antiguo top significaba “empezar desde arriba”, la sintaxis estándar equivalente es to bottom.
Corregido: usando un ángulo
<div style="background: linear-gradient(180deg, #ffffff, #000000);">
Contenido
</div>
Un ángulo de 180deg produce el mismo degradado de arriba a abajo.
Ejemplo de documento completo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo de Degradado</title>
<style>
.box {
width: 200px;
height: 100px;
/* Válido: palabra clave de dirección con "to" */
background: linear-gradient(to top, #ffffff, #000000);
}
.box-angle {
width: 200px;
height: 100px;
/* Válido: equivalente en ángulo de "to top" */
background: linear-gradient(0deg, #ffffff, #000000);
}
.box-default {
width: 200px;
height: 100px;
/* Válido: sin dirección especificada, por defecto "to bottom" */
background: linear-gradient(#ffffff, #000000);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box-angle"></div>
<div class="box-default"></div>
</body>
</html>
Los tres enfoques son válidos. Elige el que sea más claro para tu caso de uso — la sintaxis con palabra clave to es generalmente la más legible, mientras que los ángulos ofrecen más precisión para direcciones diagonales o no cardinales.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.