4

I have noticed that a background gradient in Firefox is not so smooth rendered compared to chromium.

Firefox: enter image description here

Chromium: enter image description here

Firefox renders the gradient with more "artifacts" and not a homogeneous color fade. Is there a way to smooth that, that the results looks as good as in chromium?

body{
    background-color: #2e3236;
    background-image: radial-gradient(circle, #4e505298 0, rgba(35, 40, 46, .5) 15%, #101418 95%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
Álvaro González
  • 142,137
  • 41
  • 261
  • 360
Marc
  • 2,920
  • 3
  • 14
  • 30
  • @ÁlvaroGonzález Yes, when you run the snippet it produces the exact same output as seen on the screenshots. Ubuntu 18.04 x64, Firefox v107. Same result on Android, Chrome smooth, Firefox artifacts. – Marc Jan 10 '23 at 12:08
  • refer this [post](https://stackoverflow.com/questions/11666395/how-can-i-prevent-css-gradient-banding) also this may help you – dev.skas Jan 10 '23 at 12:08
  • @dev.skas I found that question as well, but the OP is using a radial gradient. Oh, and if you think a question is a duplicate, you should generally use Flag > Needs improvement > Duplicate. – Julia Jan 10 '23 at 12:12
  • This is interesting. I ran into a similar problem a few days ago, but i got the banding in both chrome and firefox, so after doing some research I just put it away as "i have a shitty monitor". But seeing a difference here makes me wonder, if ther actually IS a solution to this other than buying an oled screen – Matthias Seifert Jan 10 '23 at 17:23

0 Answers0