Issue Step 50 "linear-gradient" function


Step 50 of the 3rd part of the New Responsive Web Design:
"Now you’ll apply a red-to-green gradient along a 90 degree line to the first marker.

First, in the .red CSS rule, set the background property to linear-gradient(), and pass it the value 90deg as the gradientDirection."

This is the code given to work on:

.red {
  background: rgb(255, 0, 0);

My answer:

.red {
  background: linear-gradient(90deg, red, green);

I tried using color keywords, hex, rgb or hsl but the code . Is there a bug on step 50? The gradient from red to green is visible with the code I wrote, why is it not accepted?

1 Like

At this point there should only be a direction set, you have set the colors also

You might have applied the colors looking at this.
But look at the instructions below.

It only asks you to set the direction

Hi, I’m also facing similar situation as OP.

My current code is

.red {

background: linear-gradient(90deg, 0, 0);


but it is still not letting me through.

Am I still doing something wrong with the code?

Hi @Sriracha02 :ok_woman:
first of all, after the “90deg” should follow at least 2 colors that will create the color gradient

you wrote “0” for the first color and “0” for the second color. writing just zero does not correspond to any color in CSS

of all the different ways to represent color in CSS, taught inside the “CSS Color Markers” section of the (New) Responsive Web Design course, writing zero will not output any color in CSS

also in this step 50, if you read what is requested with attention, at this point to solve this step is only asked to write “90deg” and in the next lessons the colors, to create the gradient, will be added

" First, in the .red CSS rule, set the background property to linear-gradient() , and pass it the value 90deg as the gradientDirection ."

also the solution to this step has been provided by @Cryptic_X in this same post :arrow_up:

Hi @QueenDaenerys ,

Thanks for the response. I am stuck at the concept of just entering 90deg in the value, as I tried to remove the two sets of “0” out of the code and it’s not letting me through.

Can I request for more assistance so I can better understand what my issue is at this stage?

Below are the codes that I’ve tried:

.red {
background: linear-gradient(90deg);

.red {
background: linear-gradient(90deg, 0, 0);

I understand that you’re already telling me that the question is not yet asking me to include the colours in the code, but I’m not sure where I’m making the mistake and really confused.

Hopefully I’m giving enough insight to my newbie situation.

Thanks in advance as well!

The code should have worked for you, try resetting and doing again.
If this still does not work try your code in a different browser or in an incognito window.

1 Like

@Sriracha02 try writing the code first in your notepad app then paste it into the lesson

Not sure what changed but finally got through!

Thanks for all the help!


It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.