Linear Gradient

HTML-CSS
#1

I am not sure that I am correct with the Linear Gradient percentage settings

.bb2b {
width: 100%;
height: 100%;
background: linear-gradient(var(–building-color2)0% 6%, var(–window-color2)6% 9%)
}

Add a linear-gradient to .bb2b that uses --building-color2 from 0% to 6% and --window-color2 from 6% to 9%.



      **Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Safari/537.36</code>

**Challenge:**  Step 51

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-51
#2

Hi @jedidiahzurik ,

A linear-gradient can be created like this :

linear-gradient(
  var(--first-color) 0%,
  var(--first-color) 40%,
  var(--second-color) 40%,
  var(--second-color) 80%
);

Or like this :

linear-gradient(
  var(--first-color) 0% 40%,
  var(--second-color) 40% 80%
);

Both are equivalent. But the challenge is requiring you to use the first syntax.

You are also not using the right hyphen for the variables.
So make sure it is a double -- not a single – :

1 Like
#3

Very much appreciated

1 Like