Linear gradients not working in IE or Firefox - css

I read that the syntax had updated to remove the prefix, but I tried all of the following and none of them are working:
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#82dc7b), to(#61a45c));
-webkit-linear-gradient(top, #82dc7b, #61a45c);
-moz-linear-gradient(top, #82dc7b, #61a45c);
-ms-linear-gradient(top, #82dc7b, #61a45c);
-o-linear-gradient(top, #82dc7b, #61a45c);
linear-gradient(to bottom, #82dc7b, #61a45c);


How about something like this?
background: #82dc7b; /* Old browsers */
background: -moz-linear-gradient(top, #82dc7b 0%, #61a45c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82dc7b), color-stop(100%,#61a45c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #82dc7b 0%,#61a45c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #82dc7b 0%,#61a45c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #82dc7b 0%,#61a45c 100%); /* IE10+ */
background: linear-gradient(to bottom, #82dc7b 0%,#61a45c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82dc7b', endColorstr='#61a45c',GradientType=0 ); /* IE6-9 */
Check out the following resource for help: http://www.colorzilla.com/gradient-editor/


Try this:
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#82dc7b), to(#61a45c));
background: -webkit-linear-gradient(top, #82dc7b, #61a45c);
background: -moz-linear-gradient(top, #82dc7b, #61a45c);
background: -ms-linear-gradient(top, #82dc7b, #61a45c);
background: -o-linear-gradient(top, #82dc7b, #61a45c);
background: linear-gradient(to bottom, #82dc7b, #61a45c);
Also, check out http://colorzilla.com/gradient-editor/

Related

CSS3 Gradient Background working in Chrome and Firefox but not IE 11

I currently am trying to use a linear-gradient from CSS3 as the background of a site, and from what I can tell, am following the spec to comply with Internet Explorer right, but I can't tell what's not working here.
body {
padding: 0px;
margin: 0px 0px 0px 0px;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(26,42,132,1) 40%, rgba(33,29,155,1) 50%, rgba(26,42,132,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(40%,rgba(26,42,132,1)), color-stop(50%,rgba(33,29,155,1)), color-stop(60%,rgba(26,42,132,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

We are using following CSS in one of our projects and it works on Chrome, Firefox and IE11.
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image: -moz-linear-gradient(#000, transparent);
background-image: -o-linear-gradient(#000, transparent);
background-image: linear-gradient(#000, transparent);
See this Fiddle as well: http://jsfiddle.net/3ck72fbc/

css not working in chrome and IE

I am new for html and css. Here Is My css code:
background: -moz-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
this background color effect not working in IE and Chrome How to change this code to work.

Vendor prefixes are no longer needed for gradients.
background: linear-gradient(to bottom, #F9F9F9, #F0F0F0);
Done.

The -moz- prefix is only used by Firefox - so you need to copy the exact line to use in the other browser-familys:
background: linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -o-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);

You are doing a gradient only for Mozilla, you need to do it for IE and Chrome separately
Please check this site out as it will do the code for you but, provide comments so you get an idea how each browser responds to each line of code
http://www.colorzilla.com/gradient-editor/
Example code
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Check the documentation https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient. It depends on javascript engine used by browsers.
As it states the doc for crossbrowser:
.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}

-moz-linear-gradient is for Mozilla Browser(Firefox). You should use webkit-linear-gradient for chrome.

-moz is a prefix for Mozilla Firefox, please check this site:
http://colorzilla.com/gradient-editor/
and look through the code and comments:
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

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?

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.

How can I put two CSS gradient backgrounds in one div?

I have the following CSS:
.main {
padding-right: 15px;
padding-left: 15px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)top;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)top; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))top; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) top; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )top; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)bottom;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)bottom; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))bottom; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) bottom; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )bottom; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
padding-top: 50px;
min-height:600px;
}
And here is a live example: http://jsfiddle.net/ZtJmM/
I want that one gradient be at the top, and one at the bottom of the element. Is that possible?
Thanks!

Yes, use them in the same statement like:
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) top,
linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) bottom;

Background image not showing up in IE9

Other browers like chrome shows up fine. IE9 just shows the gradients no images.
Code CSS
body {
background:
url('../images/adventure/background.png')
background: url('../images/adventure/background.png'), -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 40%, rgba(149,147,160,1) 100%); /* FF3.6+ */
background: url('../images/adventure/background.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,0.4)), color-stop(100%,rgba(149,147,160,1))); /* Chrome,Safari4+ */
background: url('../images/adventure/background.png'), -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* Chrome10+,Safari5.1+ */
background: url('../images/adventure/background.png'), -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* Opera 11.10+ */
background: url('../images/adventure/background.png'), -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* IE10+ */
background: url('../images/adventure/background.png'), linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#9593a0',GradientType=0 ); /* IE6-8 */

You need a closing semicolon (;) on the first background like this:
background: url('../images/adventure/background.png');

Resources