4

This is working in Chrome but not in Safari:

background: -webkit-radial-gradient(center, ellipse cover, #fdfdfd, #d3d3d3);

How can I fix it for Safari?

Jonas
  • 121,568
  • 97
  • 310
  • 388
coure2011
  • 40,286
  • 83
  • 216
  • 349

2 Answers2

4

It doesn't even work correctly in Chrome, as it shows a circular gradient, not an elliptical one. It does work correctly in Webkit nightlies.

The reason it doesn't work in Safari is that the syntax hasn't propagated yet to a stable version of Safari. Eventually it will. You need to learn patience my young padawan :)

For now, you may use -webkit-gradient, but always include the -webkit-radial-gradient equivalent after it. And while we're at it, don't forget the other prefixes too (-o-,-moz-,-ms-)

Lea Verou
  • 23,618
  • 9
  • 46
  • 48
3

Try using for Safari:

background: -webkit-gradient( radial, <point>, <radius>, <point>, <radius>[, <stop>]* ) <color>;

Examples and more explanation can be found here: http://www.the-art-of-web.com/css/radial-gradients/

Iurii Tkachenko
  • 3,106
  • 29
  • 34
  • not sure how to create exactly same gradient. Can you please convert my version to exact one with exact values? – coure2011 Apr 30 '11 at 12:18
  • There are many gradients (namely ones that adapt to the size of their box) that can be done using the new syntax that can't be done using the old syntax ie. there is no exact analog to "cover" in the old syntax. – Michael Mullany May 02 '11 at 00:48