HTML Guides for background
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
background CSS property has an invalid value; "from" is not recognized as a valid color or background value.
The background property in CSS can accept color names, hex codes, rgb/rgba values, or CSS keywords, but "from" is not valid. Sometimes this error can appear if using incorrect CSS gradient syntax, where "from" is not a recognized value.
Detailed Explanation
In standard HTML and CSS, a background can be set using:
- Hex color codes, such as #fff or #ffffff
- Named colors, such as red or blue
- Functions, such as rgb(255,0,0) or linear-gradient(...)
If you wrote something like:
background: from #fff to #000;or
background: "from";neither is valid CSS.
To use gradients, use correct linear-gradient() or radial-gradient() syntax:
background: linear-gradient(to right, #fff, #000);For a solid color:
background: #fff;HTML Examples
Incorrect CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Incorrect CSS</title>
<style>
div {
background: from #fff to #000; /* Invalid syntax */
}
</style>
</head>
<body>
<div>Bad background</div>
</body>
</html>Correct CSS (Gradient):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Correct CSS Gradient</title>
<style>
div {
background: linear-gradient(to right, #fff, #000);
}
</style>
</head>
<body>
<div>Good background</div>
</body>
</html>Correct CSS (Solid Color):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Correct CSS Color</title>
<style>
div {
background: #fff;
}
</style>
</head>
<body>
<div>White background</div>
</body>
</html>Always use a valid color value or gradient function for the background property.
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>The background CSS property is a shorthand that can accept values for background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. When the validator encounters an unrecognized value, it tries to match it against individual sub-properties like background-color. If the value doesn’t match any of them, you’ll see this error.
Common causes include typos in color names (e.g., bleu instead of blue), malformed hex codes (e.g., #gggggg or a missing #), incorrect function syntax (e.g., rgb(255 0 0 with a missing parenthesis), or using values that simply don’t exist in CSS. This error can also appear when a CSS custom property (variable) is used in inline styles and the validator can’t resolve it, or when a browser-specific value is used that isn’t part of the CSS specification.
Fixing this issue ensures your styles render predictably across browsers. While browsers are often forgiving and may ignore invalid declarations silently, relying on that behavior can lead to inconsistent rendering. Standards-compliant CSS is easier to maintain and debug.
How to Fix
- Check for typos in color names, hex codes, or function syntax.
- Verify the value format — hex colors need a # prefix, rgb() and rgba() need proper comma-separated or space-separated values with closing parentheses.
- Use background-color instead of the shorthand background if you only intend to set a color. This makes your intent clearer and reduces the chance of conflicting shorthand values.
- Remove vendor-prefixed or non-standard values that the validator doesn’t recognize.
Examples
Incorrect — Typo in color name
<div style="background: aquaa;">Content</div>aquaa is not a valid CSS color name, so the validator rejects it.
Correct — Valid color name
<div style="background: aqua;">Content</div>Incorrect — Malformed hex code
<div style="background: #xyz123;">Content</div>Hex color codes only allow characters 0–9 and a–f.
Correct — Valid hex code
<div style="background: #00a123;">Content</div>Incorrect — Missing hash symbol
<div style="background: ff0000;">Content</div>Without the #, the validator interprets ff0000 as an unknown keyword.
Correct — Hex code with hash
<div style="background: #ff0000;">Content</div>Incorrect — Broken rgb() syntax
<div style="background: rgb(255, 0, 300);">Content</div>RGB channel values must be between 0 and 255 (or 0% to 100%).
Correct — Valid rgb() value
<div style="background: rgb(255, 0, 128);">Content</div>Correct — Using background-color for clarity
When you only need to set a color, prefer the specific background-color property over the shorthand:
<div style="background-color: rgba(255, 0, 0, 0.5);">Semi-transparent red</div>Correct — Valid shorthand with image and other properties
<div style="background: url('image.jpg') no-repeat center / cover;">Content</div>Note the / between background-position (center) and background-size (cover) — this is required syntax in the shorthand.
Ready to validate your sites?
Start your free trial today.