CODEWITHSUNDEEP
csscross-browserlinear-gradients
codelove
codelove

Reputation: 2016

Linear gradient in Chrome and Safari browsers

I am having trouble showing a linear gradient in Safari and Chrome. In Firefox it shows up fine.

I am trying:

background: -webkit-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;   
background:    -moz-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;
background:     -ms-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;
background:      -o-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;

Thanks you for your help.

Upvotes: 19

Views: 85794

Answers (6)

Yes Barry
Yes Barry

Reputation: 9836

For me safari didn't like going from a color to transparent, so the only solution was go from a transparent color to a zero opacity version of the same color.

Bad

background: linear-gradient(to bottom, rgba(255, 255, 255, .75), transparent);

Good

background: linear-gradient(to bottom, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));

Upvotes: 0

destresa
destresa

Reputation: 117

background-attachment: fixed; /* worked for me */

Upvotes: 1

kay
kay

Reputation: 337

For Cross browser compatibility try the following

background-color: #9e9e9e; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(bottom, rgb(213,12,18), #9e9e9e 40%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image:    -moz-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For Firefox (3.6 to 15) */
background-image:      -o-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For old Opera (11.1 to 12.0) */ 
background-image:         linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* Standard syntax; must be last */

Upvotes: 7

Zoltan Toth
Zoltan Toth

Reputation: 47667

Try this - http://jsfiddle.net/fwkgM/1/

  background-color: #9e9e9e;
  background-image: linear-gradient(to bottom, #9e9e9e, #454545);

CSS3 Please

Upvotes: 36

Brian Sanchez
Brian Sanchez

Reputation: 918

background: -webkit-linear-gradient(left,transparent,black 50%,transparent); /* worked for me*/

Upvotes: 1

Rega
Rega

Reputation: 880

You can also try this:

http://www.colorzilla.com/gradient-editor/

It's a pretty good CSS3 gradient generator. It has worked well for me. Hope it helps you too! :D

Upvotes: 7

Related Questions