How to get rid of line at bottom of gradient?

Question

I generate my pages background using a radial/linear gradient, specifically:

background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);

When viewing pages larger than 1920x1080 and scrolling on the y axis I get a line between the original gradient and the continuation that looks like:

I want to get rid of this line somehow so that when a user scrolls down the page, everything appears seamless.

How can I do this in CSS?

`html {min-height: 100%}` ? – Temani Afif Oct 27 '22 at 21:19 — Temani Afif, Oct 27 '22 at 21:19

score 0 · Answer 1 · answered Oct 27 '22 at 21:35

That seems to work as suggested by Temani Afif 15 mins ago html {min-height: 100%}

html {
  min-height: 100%;
}

body {
  background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
}

<body>
</body>

How to get rid of line at bottom of gradient?

1 Answers1