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

0 votes

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?

May 30 in CSS by Edureka
• 7,940 points
30 views

1 answer to this question.

0 votes
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.
answered Jun 1 by Edureka
• 8,820 points

Related Questions In CSS

0 votes
0 answers

CSS: Set a background color which is 50% of the width of the window

Attempting to create a "split-in-two" background with ...READ MORE

2 days ago in CSS by Edureka
• 7,940 points
8 views
0 votes
1 answer

Position a CSS background image x pixels from the right?

The attribute border can be used as ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,820 points
14 views
0 votes
0 answers
0 votes
1 answer

CSS/HTML Can't align 3 pictures on the same line

div is inherently display:block you need to use something like ...READ MORE

answered Jun 21 in CSS by Edureka
• 8,820 points
7 views
0 votes
0 answers

CSS: background image on background color

If this panel is chosen, a panel ...READ MORE

Jun 22 in CSS by Edureka
• 7,940 points
11 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
4,476 views
0 votes
1 answer

Using/Handling colon inside a JSF generated HTML element ID in CSS selector

Yes, you can.  Just Backslash (\) the colon.  Like ...READ MORE

answered Nov 14, 2018 in Others by DataKing99
• 8,240 points
1,652 views
0 votes
1 answer
0 votes
1 answer

How can I position my div at the bottom of its container?

Bottom and position properties can be used ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,820 points
13 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP