Why is my gradient color not blending the edges

Question

Top colour from Gradient not blending and making a rought joint.
https://code.sololearn.com/WvUFzvwZQymj/?ref=app

Answer 1

To understand why gradient isn't blending, you have to understand how to use color stops.

imagine a straight line
________________________________________
0% 30% 60% 100%

now adding colour stops :
+ first at #ffffff 0%
+ next color at #ff5500 30%
+ next color #00bfff 60%
+ last color #000000 100%

you might have noticed x% is increasing this makes nice blending between current one to next color-stop.

In you case: 19% 7% 7% 7% 60%
a> starting with 19%
b> next going back at 7% -> which is making color to jump from one to the next without blending

c> again at 7% -> 7% to 7% leaves 0px gap between b to c
d> again at 7% -> 7% to 7% leaves 0px gap between c to d
e> last at 60% -> 7% to 60% gradient from d to e

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

Answer 2

CSS Linear Gradients
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

CSS linear-gradient() Function

https://www.w3schools.com/cssref/func_linear-gradient.asp

Answer 3

Absolute Zero ϟ Thank you

Answer 4

when you have overlapping %, it creates a sharp transition.
you have a lot of 7%

Answer 5

SoloProg am i not doing that in my style? Infact i have added more then two colors i hope you have checked my code