Remove css linear-gradient white line-CodePudding

I think it's kind of an optical illusions... but wonder how to remove white line of end of linear-gradient. Here is my css code.

position: absolute;
z-index: 1;
bottom: 0;
background: linear-gradient(180deg, rgba(210, 210, 210, 0) 18.61%, #262626 100%);
width: 100%;
height: 180px;

and looks like this.

Thanks !

CodePudding user response：

This is what you need! Easing linear gradients.

It's a really interesting read, but it essentially boils down to manually easing your gradient like this:

linear-gradient(
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.738) 19%,
  hsla(0, 0%, 0%, 0.541) 34%,
  hsla(0, 0%, 0%, 0.382) 47%,
  hsla(0, 0%, 0%, 0.278) 56.5%,
  hsla(0, 0%, 0%, 0.194) 65%,
  hsla(0, 0%, 0%, 0.126) 73%,
  hsla(0, 0%, 0%, 0.075) 80.2%,
  hsla(0, 0%, 0%, 0.042) 86.1%,
  hsla(0, 0%, 0%, 0.021) 91%,
  hsla(0, 0%, 0%, 0.008) 95.2%,
  hsla(0, 0%, 0%, 0.002) 98.2%,
  hsla(0, 0%, 0%, 0) 100%
);

If this seems daunting or you need to replicate many times, head to the bottom of the article. It describes ways to automate the effect using CSS processors like PostCSS or SCSS.