CODEWITHSUNDEEP
cssfirefoxlinear-gradients
Furman
Furman

Reputation: 2395

Css linear gradient not working as expected in mozilla firefox

I have problem with linear gradient in mozilla firefox. Following css code:

background: linear-gradient(180deg, black 20%, darkorange);


html {
  height:100vh;/* demo purpose*/
  background: linear-gradient(180deg, black 20%, darkorange);
}

For all browser produces nice background smoothly transforming from black to orange color. However it doesn't work in Firefox. It produces lot of thin orange and black lines one each after other. However, when I change first parameter to 90deg (horizontal gradient), it works as it is supposed to. What I'm doing wrong? I've read similiar question from stackoverflow about this problem, but no solution worked for me. And yes, I tried to change to -moz-linear-gradient and it isn't working either (I'm using latest version of FF browser, so it shouldn't be a factor anyway.

Thank you for help in advance.

JS-fiddle link (not much to fiddle there though):

Hmm I tested here in code snipped added by GCyrillus and it's working correctly. However when I'm testing it in my browser or JS Fiddle it still produces strange result as shown in this image: Imgur

Upvotes: 0

Views: 824

Answers (1)

miken32
miken32

Reputation: 42683

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>

Upvotes: 1

Related Questions