Is It Possible To Set The Gradient In A Css Background Using Unanchored Start And End Positions?

In an SVG gradient you can set the start x y and end x y position. Is it possible to do that in CSS linear gradient but using unanchored, independent start and end positions (image

Solution 1:

You can consider the use of calc() where you will combine pixel and percentage value. The percentage value will define the reference and the pixel will define the gradient length and you multiple the length with the percentage of each color:

.rectangle {
  width: 200px;
  height: 100px;
  display:inline-block;
  border:1px solid;
  
  background: linear-gradient(225deg, 
    rgba(255,255,255,1) calc(50% - 70px*(1 - 0)), 
    rgba(250,0,0,1)     calc(50% - 70px*(1 - 0.2759)), 
    rgba(108,22,95,1)   calc(50% - 70px*(1 - 0.7635)), 
    rgba(39,32,32,1)    calc(50% - 70px*(1 - 1)))
}

<divclass="rectangle"></div><divclass="rectangle"style="width:100px;"></div><divclass="rectangle"style="width:300px;"></div>

In the above I made the end point at 50%. You can do the same for the starting point:

.rectangle {
  width: 200px;
  height: 100px;
  display:inline-block;
  border:1px solid;
  
  background: linear-gradient(225deg, 
    rgba(255,255,255,1) calc(50% + 70px*0), 
    rgba(250,0,0,1)     calc(50% + 70px*0.2759), 
    rgba(108,22,95,1)   calc(50% + 70px*0.7635), 
    rgba(39,32,32,1)    calc(50% + 70px*1))
}

<divclass="rectangle"></div><divclass="rectangle"style="width:100px;"></div><divclass="rectangle"style="width:300px;"></div>