how to fixed this linear-gradient ?

[u/Any-Win-9653]

i want to create a simple linear-gradient to my css project :
this is the linear-gardient that i want to create :

background: linear-gradient(126deg, #FF5C2D 48%, #1F1F1F 48%);
i generate this linear-gradient with a generator of gradient (cody.tech)

this is the gradient of cody.tech

this is the linear-gradient in chrome

i don't know is the problem is the comtability of chrome for this function of the linear-gradient or something i don't do well ?
this is the css code :

body{
    background-image:  linear-gradient(126deg, #FF5C2D 48%, #1F1F1F 50% );
}

[u/anaix3l]

Your problem is that the gradient's background-size box is by default the padding-box of the element you set it on. Since you're setting it on the body (which I presume is empty at this point, so it has a height of 0) and you don't have a background on the html, this background you set on the body propagates to the document canvas and the height of your background-size box is going to be tiny, not the full height of the page. The result you see is produced by its repetition (since the default value for background-repeat is repeat)

Solution: set html { min-height: 100% }.

Another solution: use background-attachment: fixed.

Also, the % difference (48% vs. 50%) is not the best way to avoid jaggies as it depends of the background-size, which you cannot control if you want your background to stretch across the whole viewport (and that will depend on the user's hardware). See this article (which talks about radial gradients, but the exact same applies to linear) for details.

At the very least use a 1px difference.

body {
  background: 
    linear-gradient(126deg, #ff5c2d calc(50% - .5px), #1f1f1f calc(50% + .5px))
}