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
• 12,880 points
1,093 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
• 11,450 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
• 12,880 points
155 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
• 11,450 points
779 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
• 11,450 points
233 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
• 11,450 points
1,566 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
• 12,880 points
104 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
• 12,880 points
155 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
• 12,880 points
165 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
• 12,880 points
436 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
• 11,450 points
1,087 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
• 11,450 points
1,339 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