CODEWITHSUNDEEP
cssfirefoxbackground-imagegradientchromium
Marc
Marc

Reputation: 3904

Smooth firefox background gradient

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

Upvotes: 7

Views: 435

Answers (2)

Lukas Willin
Lukas Willin

Reputation: 582

Firefox doesn't really create artifacts here. The colour stepping comes from the fact that we only have 256 shades of grey 😝. I assume chrome introduces its own dithering or noise to the gradient to hide the imperfections.

Anyway, one way to hide the stepping for all users is by introducing noise.

You can use a service like https://www.cssmatic.com/noise-texture to generate 1 two or more noise textures. Then add that to your background.

.gradient
{
    /* Background fallback */
    background: #2e3236;
    /* For all browsers that already smooth over the stepping effect */
    background: radial-gradient(circle, #4e505298 0, rgba(35, 40, 46, .5) 15%, #101418 95%);
}

/* Since chrome works well we add the noisy version in this query.
(Thanks to the answer here: https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css). */
@-moz-document url-prefix()
{
    .gradient
    {
        /* I got the best effect from generating a bunch of these textures at different grey values and opacities. You just got to play around a little what works best for your specific use case. */
        background: radial-gradient(circle, #4e505298 0, rgba(35, 40, 46, .5) 15%, #101418 95%),
            url(img-noise-361x370o6.png),
            url(img-noise-361x370o11.png),
            url(img-noise-361x370o2g50.png),
            url(img-noise-361x370o2g75.png),
            url(img-noise-361x370o2g25.png),
            url(img-noise-361x370o6.png),
            url(img-noise-361x370o11.png),
            url(img-noise-361x370o20g50.png),
            url(img-noise-361x370o20g25.png);
        /* I chose different background sizes for each generated texture to prevent them from overlapping too much. */
        background-size: auto, 6% 6%, 5% 5%, 4% 4%, 7% 7%, 5% 5%, 6% 6%, 4% 4%, 10% 10%, 8%, 8%;
        /* `color-burn` worked best for me to hide the colour stepping effect. But you might have to lighten your gradient colours a bit. */
        background-blend-mode: color-burn;
    }
}

Upvotes: 0

M M
M M

Reputation: 1

Found a fix:

  • go to: about:config
  • look for: "gfx.webrender.dcomp-win.enabled"
  • disable the option - set it to 'false'
  • restart firefox

https://i.imgur.com/jPUYK7b.png

Upvotes: 0

Related Questions