180deg linear gradient causing line at the bottom
When it's 180 deg then you can see a light green line at the bottom
. But if you change it any other value lets say 200 or 360 then this line disappears
.. Why 180deg is causing this line?
17 Replies
could be a rounding issue, happens some times
but in your case, you don't need to set color stop percentages if it goes from start to end
and 180deg direction is not necessary either, its the default
background-image: linear-gradient(#66FF7A, #3A9246)Without the direction, how will it know the direction?
could also be a repeat of the gradient image? The light green line at the bottom seems to match with the color at the top of the gradient? This might happen if there's a transparent border.
apologies didn't finish response. If this is an issue with a bottom border then
background-origin: border-box; should fix the problemActually there's no border in my css code
well then I think i'd need to see a codepen
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
yeah, noticed the 2 100% values but just assumed one would over ride the other and for the most part it does. But I can get the 1px line to show on Firefox at different zoom levels though (130%, 230% and 330%). Can't get it to happen on Chrome but chrome also doesn't allow zooming to that magic 30% value that seems to break it in Firefox....
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
So the solution is to not make one of them 100%?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Actually I got that code from Figma
yeah there really isn't any reason for that second 100% value. I assumed that It probably came from a generator of some kind. All you really need is:
background-image: linear-gradient(#66FF7A, #3A9246);Got it. But in this code, if we don't mention any direction then the default value is top to bottom ie 180 deg?
yep, yep. Also when you only have 2 color stop values the default for the first is 0% and value for the second its 100%.
And if there are 3 colour stops?
i think it just even distributes them. So default would be 0%, 50%, 100%.