How to Get Linear Gradient Effect on Mozilla Firefox

CSS3 Gradient not working in Firefox

try this... its cross browser even works in ie6

.bodyGradient {
    position: absolute; 
    top: 0; 
    left: 0; 
    border-top: 3px solid #93ae59; 
    z-index: -1;
    background: -moz-linear-gradient(top,  #cfddac,  #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
    background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
}

Css linear gradient not working as expected in mozilla firefox

You need to ensure the element you're setting a background on has a height, either explicitly set or due to content.

.test {  width: 100px;  background: linear-gradient(180deg, black 20%, darkorange);  float: left;}#test1 {  height:200px;}

<div class="test" id="test1">Test</div><div class="test">Test</div>

Linear gradient Firefox support

Please install the compass version ~1.0.0

To check the current version of compass you are using, type:

$ compass version

I updated my compass by uninstalling the current version and installing the latest version.

$ gem uninstall compass
$ gem install compass


OR

if you don't want to update you can simple use it without gradient direction.

background-image: linear-gradient(#659adc, #004ca2)

radial gradient not displaying correctly in firefox

You need to set a height on the body. Setting it to 100vh will make the gradient cover the screen.

body{  background-color: blue;  background: -moz-radial-gradient(center, ellipse cover, #0047ea 0%, #151515 100%);  background: radial-gradient(#0047ea, #151515);  z-index: 0;    height: 100vh;}

Why does firefox not render this linear gradient when the background-size values exceed 255px?

Your issue is happening in Chrome (v.58 - 64-bit), on a Linux machine, too. The workaround is to modify your background-image from:

 background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%),   repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%)

... to (all 1px instances replaced by 2px):

 background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% - 2px), black calc(100% - 2px), black 100%),   repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 2px), black calc(100% - 2px), black 100%)

...when between 256px and 511px. Haven't tested, but I assume ... - 3px... is going to work up to 767px.

Do you see a pattern here? As you'd expect, this works in Firefox too.

Why? Beats me! But I recon it has something to do with sub-pixel rendering. I know, it shouldn't (after all, you're deducting 1px) but this is why web is grand, isn't it?

---

Related Topics