Radial gradient blur looks different on browsers

by

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

    }

  • Why do you use filter:blur at all?

    – 

  • And why are you repeating radial-gradient 3 times?

    – 

  • @Kosh, the reason I’m using filter:blur is to give it that effect you see on the chrome page, if I were to not use anything, you would see it just be a blue circle. It won’t be expanding outwards or anything, do I not need to? and the reason I use it 3 times is because I seen an article on which doing it more then one reduces gradient banding.

    – 

  • @Kosh this is more of a visual of the issue I’m having, if you look at the codepen the blue circle doesn’t expand out like it does in the chrome screenshot, it’s just a circle. codepen.io/Xyeut/pen/KKEJRYq

    – 




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

Leave a Comment