[Bug Report] Incorrect use of CSS variables inside linear-gradient
Challenge Name:
(Replace this with the actual challenge name, e.g., “Applied Visual Design: Create a Visual Balance Using the CSS Transform Property”)
Issue:
In the provided example or solution, the following code is used:
css
CopyEdit
background: linear-gradient(--building-color1, --window-color1);
This is incorrect because CSS variables must be used with the var() function. Writing them directly like --building-color1 inside a linear-gradient() will not work and results in a broken or missing background.
Correct Code:
css
CopyEdit
background: linear-gradient(var(--building-color1), var(--window-color1));
This is the valid syntax that properly uses the custom properties in a gradient.
Why This Matters:
Incorrect usage of CSS variables can confuse beginners. In this case, the gradient won’t render at all, making it harder to understand how CSS variables and gradients work together.