In addition to angles you can also give linear-gradient direction by keywords Of course, middle and new syntax are opposite.
to keyword, so it’s to top. This gives the direction the gradient moves to.top. This gives the direction the gradient moves from.Keywords are less versatile than angles; they only allow the eight main directions to be defined. If you want more fine-grained control, use angles.
background: -webkit-linear-gradient(top,red,yellow,green); background: linear-gradient(to top,red,yellow,green);
In new syntax, to top means the gradient starts from the bottom and moves to the top. This is also the default. In middle syntax, however, top means the gradient starts at the top and moves to the bottom: the exact reverse.
New syntax
Middle syntax
background: -webkit-linear-gradient(bottom,red,yellow,green); background: linear-gradient(to top,red,yellow,green);
Solving this problem is simple: make the middle syntax keyword the reverse of the new syntax one.
New syntax
Middle syntax
background: -webkit-linear-gradient(bottom left,red,yellow,green); background: linear-gradient(to top right,red,yellow,green);
Similarly, new to top right tells the gradient to move from bottom left to top right. The middle equivalent is bottom left.
Note one difference between the two syntaxes: the yellow diagonal, which is the centre of the gradient, stretches from corner to corner in the new syntax, but keeps to the actual centre of the gradient in middle syntax, only touching the corners if the element is a perfect square.
Thus, the best way of emulating new-syntax double keywords is angles.
New syntax
Middle syntax