CODEWITHSUNDEEP
cssgradientlinear-gradients
Adorevoy
Adorevoy

Reputation: 41

Remove css linear-gradient white line

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 !

Upvotes: 1

Views: 422

Answers (1)

harryburk
harryburk

Reputation: 116

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.

Upvotes: 1

Related Questions