css3 gradient does not work on all browsers
it works on chrome only
my code
<nav class="navbar navbar-default navbar-fixed-top" style="background: -webkit-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; background: -o-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; background: -moz-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; border:2px white solid !important;box-shadow:black 2px 2px 2px;padding-bottom:40px; min-height:100px !important;border-bottom-right-radius: 20% !important;border-bottom-left-radius: 20% !important;">
Please do check the way to add gradient
EX:
<nav class="navbar navbar-default navbar-fixed-top" style="fill: #55bbeb;
background: #55bbeb;
background: -moz-linear-gradient(90deg, #55bbeb 0%, #84c450 100%);
background: -webkit-linear-gradient(90deg, #55bbeb 0%, #84c450 100%);
background: -o-linear-gradient(90deg, #55bbeb 0%, #84c450 100%);
background: -ms-linear-gradient(90deg, #55bbeb 0%, #84c450 100%);
background: linear-gradient(90deg, #55bbeb 0%, #84c450 100%);">
If you need to support from IE9, use a SVG (work in all other none IE browsers as well, so no fallback is needed)
div {
height: 200px;
}
.gradient {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'%3E %3Cdefs%3E %3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E %3Cstop offset='0%25' style='stop-color:rgb(255,255,0);stop-opacity:1' /%3E %3Cstop offset='100%25' style='stop-color:rgb(255,0,0);stop-opacity:1' /%3E %3C/linearGradient%3E %3C/defs%3E %3Crect width='100' height='100' fill='url(%23grad1)' /%3E%3C/svg%3E") center / cover;
}
<div class="gradient"></div>
Raw SVG (which were urlencoded in above sample)
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'>
<defs>
<linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>
<stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1' />
<stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1' />
</linearGradient>
</defs>
<rect width='100' height='100' fill='url(#grad1)' />
</svg>
First of all you should move your CSS from inline to an external CSS file so as to separate concerns of HTML and CSS. Then, as vignesh has pointed out, you have to take into account browser vendor prefixes. You can write them manually, but best way to go is to use some kind of automatisation, I'd personally recommend Sass with either Compass or Bourbon or, preferred, if you work with Gulp use gulp-autoprefixer - this will not only add the needed prefixes automatically but also it will let you use a much easier way to write css3 features such as gradients using mixins.
