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, 2022 in CSS by Edureka
• 13,620 points
2,546 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, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
0 answers

How to adjust the amount of space between two lines at each <br> in CSS?

I have a document like this: This is ...READ MORE

Aug 23, 2022 in CSS by Edureka
• 13,620 points
579 views
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, 2022 in CSS by Edureka
• 12,690 points
11,286 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, 2022 in CSS by Edureka
• 12,690 points
775 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, 2022 in CSS by Edureka
• 12,690 points
5,314 views
0 votes
0 answers

CSS: background image on background color

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

Jun 22, 2022 in CSS by Edureka
• 13,620 points
395 views
0 votes
0 answers

CSS background image that can scroll

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

Jul 5, 2022 in CSS by Edureka
• 13,620 points
1,509 views
0 votes
0 answers

Stretch background image css?

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

Jul 11, 2022 in CSS by Edureka
• 13,620 points
495 views
0 votes
0 answers

CSS background image URL path

Hello, I'm attempting to utilise CSS to ...READ MORE

Aug 10, 2022 in CSS by Edureka
• 13,620 points
1,021 views
0 votes
1 answer

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple solution is to make the ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
3,853 views
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, 2022 in CSS by Edureka
• 12,690 points
3,559 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP