Search code examples
htmlcssgoogle-chromefirefoxblur

Radial gradient blur looks different on browsers

I'm noticing an issue with firefox and chrome filter: blur. FireFox limits it to 100px while I need more then 100px to get the same effect. The effect I'm trying to get is a circle that blurs out and eventually disappears towards the end

Chrome: https://i.imgur.com/xKhOjBk.png

FireFox: https://i.imgur.com/X2DXzDk.png

I've tried using images and svgs, however I know that images will cause responsiveness issues, and svgs are getting maxed out at this same blur too. What can I do instead?

This is my css:

   .right__circle {
        width: 500px;
        height: 500px;

        border-radius: 500px;
        filter: blur(250px);
        background: radial-gradient(rgba(29, 144, 250, .58), rgba(29, 144, 250, 0)), radial-gradient(rgba(29, 144, 250, .58), rgba(29, 144, 250, 0)), radial-gradient(rgba(29, 144, 250, .58), rgba(29, 144, 250, 0));

    }
Solution

  • This example does not answer filter:blur problem, but shows how you'd go without:

    html, body {
  height: 100%;
  margin:0; padding:0;
}

body {
  background: #000 radial-gradient(circle, rgba(29, 144, 250, .3), rgba(29, 144, 250, 0) 60%);
}