0

I've started using CSS gradients and I've noticed when I state the starting positions as to bottom right, Chrome uses the syntax without the -webkit- prefix. If I declare the starting position without any to or from and use bottom right, it uses the syntax with the -webkit- prefix.

/* Chrome uses first syntax with -webkit */

background-image: -webkit-linear-gradient(bottom left, rgba(50, 14, 59, .9) 5%, rgba(50, 14, 59, .5) 5%, rgba(0,0,0,0) 20%);
background-image: linear-gradient(bottom left, rgba(50, 14, 59, .5) 5%, rgba(50, 14, 59, .2) 5%, rgba(0,0,0,0) 20%);

/* Chrome uses second syntax without -webkit */

background-image: -webkit-linear-gradient(to bottom left, rgba(50, 14, 59, .9) 5%, rgba(50, 14, 59, .5) 5%, rgba(0,0,0,0) 20%);
background-image: linear-gradient(to bottom left, rgba(50, 14, 59, .5) 5%, rgba(50, 14, 59, .2) 5%, rgba(0,0,0,0) 20%);

I find this confusing and don't know which to use. For instance, if I want a gradient to start on the left, do I use 'left' or 'to right'? They both clearly do the same thing, but it affects which syntax Chrome uses. Does this same issue happen in other browsers such as Safari?

TylerH
  • 20,799
  • 66
  • 75
  • 101
pjk_ok
  • 618
  • 7
  • 35
  • 90
  • [MDN has some explanation.](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) – pol Mar 04 '17 at 03:14
  • Boltclock has marked this as a duplicate question. It isn't. The answer and some of the explanation is similar, but my question is not about are 'top' and 'to top' the same, I mention in the question I know these are different, my question is about why chrome reads the gradients in a different manner with or without the -webkit- prefix and the reasoning for this. – pjk_ok Mar 04 '17 at 21:45
  • With prefix you don't add 'to' (if you do it, it's invalid). Without prefix, you must add 'to'. – pol Mar 05 '17 at 01:38

0 Answers0