HTML Guide for linear-gradient

CSS: “background”: The first argument to the “linear-gradient” function should be “to top”, not “top”.

Use the correct direction keyword syntax in CSS gradients: replace top with to top.

In CSS Images Level 4, the first argument of linear-gradient() should either be an angle (e.g., 180deg) or a direction using the to keyword (e.g., to top, to right). Older syntax like linear-gradient(top, ...) is no longer valid and triggers validator errors. Valid forms include: linear-gradient(to top, #fff, #000), linear-gradient(180deg, #fff, #000), or simply omit the direction to default to to bottom. Keep gradients in your CSS, not HTML attributes. The style attribute or a stylesheet can set the background or background-image with a valid gradient function.

HTML Examples

Example showing the issue

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gradient Issue</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background: linear-gradient(top, #ffffff, #000000); /* invalid */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Fixed example (valid syntax)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gradient Fixed</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* Option A: direction keyword */
        background: linear-gradient(to top, #ffffff, #000000);
        /* Option B: angle (equivalent) */
        /* background: linear-gradient(0deg, #ffffff, #000000); */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>