如何创建从一个方向到A到B到另一个方向从A到B的渐变？

Question

I am looking to create a gradient that goes from A --> B --> A in the positive X direction while at the same time going from A --> B in the negative Y direction. Basically it should be one color on the left then fade to white and then back to the first color but should all fade to white at the bottom. I have been trying to do this with CSS but I am not sure it is possible and am open to other option

Answer 1

You can layer 2 elements to achieve this ... jsfiddle https://jsfiddle.net/x0d5oLc4/

html

<div id="bfcontainer">
 <div id="bluefade"></div>
 <div id="whitefade"></div>
</div>

css

#bfcontainer {
  position:relative;
}

#bluefade{  
  position:absolute;
  z-index:1;  
  width:200px;
  height:200px;  
  background: #1e5799; /* Old browsers */
  background: -moz-linear-gradient(left, #1e5799 0%, #ffffff 49%, #1e5799 100%); 
  background: -webkit-linear-gradient(left, #1e5799 0%,#ffffff 49%,#1e5799 100%); 
  background: linear-gradient(to right, #1e5799 0%,#ffffff 49%,#1e5799 100%); 
}
#whitefade{
  display:block;
  position:absolute;
  z-index:2;
  width:200px;
  height:200px;

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

}