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
• 9,800 points
180 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
• 9,540 points

Related Questions In CSS

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
• 9,540 points
27 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
• 9,540 points
25 views
0 votes
1 answer

I want to create a small square colour filled box in HTML & CSS. And most important - I want to write one line after the box

Try using the square html entity: <div style="color:blue">&a ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
31 views
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
• 9,540 points
16 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
• 9,800 points
21 views
0 votes
0 answers

CSS background image that can scroll

I'm attempting to make a backdrop image ...READ MORE

Jul 5 in CSS by Edureka
• 9,800 points
6 views
0 votes
0 answers

Stretch background image css?

<td class="style1" align='left' height='35'> <div style='overflow: ...READ MORE

Jul 11 in CSS by Edureka
• 9,800 points
23 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,712 views
0 votes
1 answer
0 votes
1 answer

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

You can make a hard distinction instead ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
41 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