HTML Guides for from

The background CSS property accepts a variety of value types: named colors (red, blue), hexadecimal codes (#fff, #ff0000), color functions (rgb(), hsl(), rgba()), gradient functions (linear-gradient(), radial-gradient()), image URLs, and CSS keywords like none, transparent, or inherit. The word from is not among these valid values.

Why this happens

This error most commonly appears in one of these scenarios:

1. Legacy WebKit gradient syntax. Older versions of Safari and Chrome used a proprietary syntax: -webkit-gradient(linear, left top, right top, from(#fff), to(#000)). The from() and to() functions are part of this deprecated, non-standard format. If this syntax is used without the -webkit- prefix—or if the validator encounters it—the word from gets flagged as an invalid color value.

2. Incorrectly written gradient shorthand. Some developers unfamiliar with the CSS gradient specification write something resembling natural language, like background: from #fff to #000, which has no meaning in CSS.

3. CSS from keyword in relative color syntax. CSS Color Level 5 introduces relative color syntax using the from keyword (e.g., rgb(from red r g b / 50%)). This is a newer feature that may not yet be recognized by the W3C CSS validator, which can lag behind the latest specifications. If you’re using this syntax intentionally, the error may be a false positive from the validator, but be aware that browser support may still be limited.

Why it matters

Invalid CSS values are silently ignored by browsers, meaning your intended background styling won’t be applied. The element will fall back to its default or inherited background, which can result in broken layouts, missing visual cues, or poor contrast that harms readability and accessibility. Using standard, valid CSS ensures consistent rendering across all browsers.

How to fix it

• Replace legacy -webkit-gradient() syntax with the standard linear-gradient() or radial-gradient() functions.
• Use valid color formats for solid backgrounds: hex codes, named colors, or color functions.
• If using relative color syntax (from keyword in CSS Color Level 5), understand that the validator may not yet support it. Consider adding a fallback value for broader compatibility.

Examples

Incorrect: legacy WebKit gradient syntax

The from() and to() functions in -webkit-gradient() are non-standard and will trigger this error if used as a background value:

<style>
  .banner {
    /* Non-standard syntax; "from" is not a valid CSS value */
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(#000));
  }
</style>
<div class="banner">Legacy gradient</div>

Incorrect: made-up gradient shorthand

Writing gradient-like syntax without a proper CSS function is invalid:

<style>
  .banner {
    /* "from" and "to" are not valid CSS keywords here */
    background: from #fff to #000;
  }
</style>
<div class="banner">Invalid gradient</div>

Correct: standard linear gradient

Use linear-gradient() with a direction and comma-separated color stops:

<style>
  .banner {
    background: linear-gradient(to right, #fff, #000);
  }
</style>
<div class="banner">Standard gradient</div>

Correct: solid color background

For a simple solid color, use any valid CSS color value:

<style>
  .banner {
    background: #fff;
  }
</style>
<div class="banner">White background</div>

Correct: gradient with a fallback for older browsers

When using gradients, it’s good practice to provide a solid color fallback:

<style>
  .banner {
    background: #fff;
    background: linear-gradient(to bottom, #ffffff, #cccccc);
  }
</style>
<div class="banner">Gradient with fallback</div>

Correct: relative color syntax with a fallback

If you intentionally use CSS Color Level 5 relative color syntax and the validator flags from, provide a fallback and be aware of current browser support:

<style>
  .banner {
    background: rgb(255, 0, 0);
    background: rgb(from red r g b / 50%);
  }
</style>
<div class="banner">Relative color with fallback</div>

Always verify that your background values use standard CSS syntax. When in doubt, test your styles in the W3C CSS Validator and check browser support on Can I Use.