How do I remove the weird lines on the linear gradient?

Question

I'm getting these weird lines on my background gradient which I always used to get but I would return back to a smooth background with background-size:cover;. Why doesn't that work and how can I fix it?
https://code.sololearn.com/W6785Tfe1H6G/?ref=app

Answer 1

Add

html, body {
height: 98%;
}

Answer 2

Calviղ Thank you! Any explaination of why adding the heights affects the background to change? Why doesnt background size work?

Answer 3

Calviղ Thanks!

Answer 4

Webview on Sololearn has one problem, which it's body is not defined, you need to see it manually.

Your code should work on browsers, this is only Sololearn code playground programming issue. They should have set the body height by default.