CSS gradient background works horizontally but not vertically

Question

The replica of the code: https://codepen.io/utamo/pen/XoyzWN

when applying on the body:

background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%);

I have the following result

but when switching to

background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);

ends up like this

I know it’s something simple but I lack knowledge at the moment

Answer 1

Places your html and body at 100% height and background-repeat: no-repeat