Angle a gradient — practice exercise

What you'll be asked to do

1. 1.Angle a gradientexercise · easy · 10 min

   Give #box a 45deg red-to-blue gradient.

   Passes when: Give #box a 45deg red-to-blue gradient.

2. 2.Position the colour stopsexercise · easy · 10 min · practice plan

   Red at 0% and blue at 100%.

   Passes when: Red at 0% and blue at 100%.

3. 3.Use three stopsexercise · easy · 10 min · practice plan

   Red, then yellow in the middle, then blue.

   Passes when: Red, then yellow in the middle, then blue.

4. 4.Use a conic gradientexercise · easy · 10 min · practice plan

   Give #box a conic red-to-blue gradient.

   Passes when: Give #box a conic red-to-blue gradient.

5. 5.Repeat a gradientexercise · medium · 10 min · practice plan

   A repeating 45deg gradient from red to blue every 20px.

   Passes when: A repeating 45deg gradient from red to blue every 20px.

6. 6.Fix the angle with no unitbug fix · easy · 8 min

   A gradient angle needs deg.

   Passes when: A gradient angle needs deg.

7. 7.Fix the stop with no unitbug fix · easy · 8 min · practice plan

   A colour stop position needs a percentage or length.

   Passes when: A colour stop position needs a percentage or length.

8. 8.Fix the gradient on the wrong propertybug fix · easy · 8 min · practice plan

   A gradient is an image, not a colour.

   Passes when: A gradient is an image, not a colour.

9. 9.Fix radial used where conic was meantbug fix · easy · 8 min · practice plan

   This gradient should sweep around a centre point.

   Passes when: This gradient should sweep around a centre point.

10. 10.Fix the gradient that does not repeatbug fix · easy · 8 min · practice plan

    Use the repeating variant of the function.

    Passes when: Use the repeating variant of the function.

Between them these tasks cover Angles and directions, Color stops and Conic and repeating gradients.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.