CODEWITHSUNDEEP
cssgoogle-chrome
user2592186
user2592186

Reputation: 41

CSS background gradient not working in Google Chrome

I'm using the following CSS to try to get a vertical background gradient to display in most browsers.

It works fine in Firefox but is not displaying in Chrome.

You can see where I'm trying to apply the gradient in the footer section of http://blog.bmxboss.com

background: -moz-linear-gradient(top, #222222 0%, #111111 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#111111)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #222222 0%,#111111 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #222222 0%,#111111 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #222222 0%,#111111 100%); /* IE10+ */
background: linear-gradient(to bottom, #222222 0%,#111111 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#111111',GradientType=0 ); /* IE6-9 */

How can I make this work in Chrome?

Upvotes: 2

Views: 7976

Answers (1)

Danny Beckett
Danny Beckett

Reputation: 20788

Using a tool I made to generate CSS gradients, this is the CSS for a gradient from #222222 to #111111, with support for all browsers:

background: #222222;
background: -moz-linear-gradient(top, #222222 0%, #111111 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#111111));
background: -webkit-linear-gradient(top, #222222 0%,#111111 100%);
background: -o-linear-gradient(top, #222222 0%,#111111 100%);
background: -ms-linear-gradient(top, #222222 0%,#111111 100%);
background: linear-gradient(to bottom, #222222 0%,#111111 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#111111',GradientType=0 );

Here is a working JSFiddle.

Upvotes: 2

Related Questions