Ilja Ilja - 8 days ago 5
CSS Question

Start css radial gradient 40% from the top

I have radial gradient like this at the moment:

background-image: radial-gradient(circle at center left, rgb(${colours.blue}), rgb(${colours.darkBlue}));


it starts in the center, but I'd like it to start 40% from the top, something like this works in chrome, but doesn't work in firefox (both latest)

background-image: radial-gradient(circle at top 40% left, rgb(${colours.blue}), rgb(${colours.darkBlue}));


Bits like
rgb(${colours.darkBlue})
are just importing strings like
'255, 255, 255'

Answer

Firefox has a history of bugs with radial-gradient(). But i've found a possible solution on MDN:

div {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(farthest-corner at 0% 30% , #FF0000 0%, #0000FF 50%);
}
<div>test</div>

Tested in Firefox and Chrome, both produces the desired result, to invert the effect (bottom-right corner), just take the opposite variables:

div {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(farthest-corner at 100% 70% , #FF0000 0%, #0000FF 50%);
}
<div>test</div>