Search code examples
htmlcssfirefoxgradientradial

radial gradient not displaying correctly in firefox


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:

In chrome and edge I get this

This is what I see in Firefox:

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;
}

Solution

  • 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;
    }