0

I'm trying to use a linear gradient for the background of a page:

body {
  background: linear-gradient(10deg, #060f14, #002725);
}

This looks great in Chrome and Opera (+iOS Safari and mobile Firefox), but in desktop Safari and Firefox the blending is not smooth and looks really ugly.

In Chrome

In Safari

is there a way to smooth the gradient out on desktop Safari and Firefox?

Finnian Langham
  • 97
  • 7
  • a sidefact: its also good to put an prefix on linear gradient like `-webkit-` and `-moz-` and`-o-` – bill.gates Jun 29 '20 at 07:20
  • 1
    That's known as banding, and is quite normal for linear-gradients. To avoid this, UAs should apply dithering (like Chrome does). I know FF had this as a plan, but they had issues with it: https://bugzilla.mozilla.org/show_bug.cgi?id=627771 Dunno for Safari though. But anyway, no easy solution on your side... – Kaiido Jun 29 '20 at 07:27
  • 1
    @Ifaruki Browsers support gradients without prefix since 2013, so for the last 7 years. So no need to put any prefixes for gradients at all. – cloned Jun 29 '20 at 07:59
  • @TemaniAfif this is not the same case here. This question deals with how gradients are generated fundamentally, it's not just a container height issue, OP could try with an inner container and still face the same issue. Now there could be dupes, but that one is not the one. – Kaiido Jun 30 '20 at 13:05

0 Answers0