CODEWITHSUNDEEP
cssgradient
steve
steve

Reputation: 2519

CSS3 Gradient Woes

I've always relied on the excellent colorzilla gradient tool for creating my cross-browser friendly gradient CSS - but it's struggling on recreating an existing gradient which is working in some browsers already. I can't quite get the right combination of vendor prefixes and fallbacks to make it work reliably across the board currently.

The existing (working for FF / Chrome) CSS is:

background: radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;

Can anyone give some pointers on the best order/variations of this with vendor prefixes etc to allow it to work in all modern browsers?

Upvotes: 2

Views: 104

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241248

I tested this out, and it works in all modern browsers as you wanted.. however, if you want support across most browsers (including the old), I suggest a CSS3 polyfill.. current support for CSS gradient found here.

background: -webkit-radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;
background: -moz-radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;
background: -o-radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;
background: radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;

You could also use less if you want to avoid the repetitive -moz, -o, -webkit abbreviations.

Upvotes: 2

Related Questions