Skip to main content

CSS Gradients — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Gradients lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Angle a gradient

    easy10 min

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

  2. 2

    Position the colour stops

    easy10 min

    Red at 0% and blue at 100%.

  3. 3

    Use three stops

    easy10 min

    Red, then yellow in the middle, then blue.

  4. 4

    Use a conic gradient

    easy10 min

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

  5. 5

    Repeat a gradient

    medium10 min

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

Find the bug(5)

  1. 1

    Fix the angle with no unit

    easy8 min

    A gradient angle needs deg.

  2. 2

    Fix the stop with no unit

    easy8 min

    A colour stop position needs a percentage or length.

  3. 3

    Fix the gradient on the wrong property

    easy8 min

    A gradient is an image, not a colour.

  4. 4

    Fix radial used where conic was meant

    easy8 min

    This gradient should sweep around a centre point.

  5. 5

    Fix the gradient that does not repeat

    easy8 min

    Use the repeating variant of the function.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace