What's up with this light blue rectangle at the bottom?

https://codepen.io/gtrman97/full/PobarPP

I want the color gradient to persist all the way down to the bottom of the page.

Your gradient is repeating itself after it has finished. try add background-repeat: none or make the gradient go longer, you choose. :+1:t5:

It looks like it’s :no-repeat - I changed it to that but now it’s just a white rectangle at the bottom. How do I make it longer?

More height I guess? You could also make the gradient change to more colors, so that you could make it interesting. But I don’t know, lemme check…

Sadly I couldn’t find anything on solving that problem, but I tyred changing your code a little:

body {
  background-image: linear-gradient( aqua, blue);  
} 

What do you think?

You can add a padding-bottom:2rem to your <body>.

Add min-height: 100vh; to your body selector.

This will ensure the body is 100% the height of the viewport.

Add either min-height 100vh or even height 100% should work too