I am having a problem displaying a radial gradient on my website in Firefox. The gradient seems to work fine in Edge and Chrome but not Firefox.
In chrome and edge I get this:
This is what I see in Firefox:
body{
background-color: blue;
background: -moz-radial-gradient(center, ellipse cover, #0047ea 0%, #151515 100%);
background: radial-gradient(#0047ea,#151515 );
z-index: 0;
}
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;
}