Remove css linear-gradient white line

user_13857106 0
Viewed 72

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. enter image description here

Thanks !

linear-gradients gradient css
1 Answers

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.

user_190052140
Related