CSS shadow white line at the end of linear-gradient background

Question

I try to build a beautiful gradient in CSS. But when I try to create one in CSS, I always get a white line at the end of the linear-gradient background :

<html>
<head>

  <style>
    html, body {
      margin:  0;
      padding:  0;
      width: 100%;
      height: 100%;
    }
    body {

      background: transparent;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
  </style>
  
</head>
<body>
</body>
</html>

To be clear, the line isn't genuine; it's a side effect of my gradient; it's a vague line! But it's still something I'd like to get rid of. I'm sure there's something more useful to do with CSS, don't you think?

Edureka · Answer 1 · Jun 1, 2022

This is a byproduct of the gradient background, not an actual line. You can remove it by adding a transparent border to a container with a gradient backdrop. This solution always works for me.