I made a card glow effect. I use a blur div in a card. I set a radius with the card and made the card overflow-hidden. But I can still see the sharp corner.
I learn this effect from this youtube:https://www.youtube.com/watch?v=dN5Nmgpon0k
I can’t find my mistake, I need help. 
This is my link: Webflow - Bubbly landing page
hi @Sean_Wong I do not experience any issue you have shown in any browser. So I assume you have it solved. Anyway there is another issue in Chrome on hover for these cards it is big white burry spot following mouse that makes cards not readable. Other browsers (Safari, Edge, Brave, Arc, Firefox) do not have this effect at all. 
Thank you very much, Stan.
I tried opening my preview link with Safari and found that the issue disappeared. However, I still noticed the strange issue in Google Chrome, where sharp corners appear.
But I didn’t notice the problem with the white spots in Google Chrome.
It’s very strange why this issue occurs in Chrome!
Hey Sean,
You’ll have to adjust the border-radius a bit but apply this styling to the card-wrap:
clip-path: polygon(0px 31px, 0px 31px, 0.4057384px 25.9716456px, 1.5804032px 21.2016128px, 3.4601688px 16.7537272px, 5.9812096px 12.6918144px, 9.0797px 9.0797px, 12.6918144px 5.9812096px, 16.7537272px 3.4601688px, 21.2016128px 1.5804032px, 25.9716456px 0.4057384px, 31px 5.1322304417548E-31px, calc(100% - 31px) 0px, calc(100% - 31px) 0px, calc(100% - 25.971597px) 0.4057384px, calc(100% - 21.201536px) 1.5804032px, calc(100% - 16.753639px) 3.4601688px, calc(100% - 12.691728px) 5.9812096px, calc(100% - 9.079625px) 9.0797px, calc(100% - 5.981152px) 12.6918144px, calc(100% - 3.460131px) 16.7537272px, calc(100% - 1.580384px) 21.2016128px, calc(100% - 0.405733px) 25.9716456px, calc(100% - 5.6843418860808E-14px) 31px, calc(100% - 0px) calc(100% - 31px), calc(100% - 0px) calc(100% - 31px), calc(100% - 0.40573299999994px) calc(100% - 25.971597px), calc(100% - 1.5803839999999px) calc(100% - 21.201536px), calc(100% - 3.460131px) calc(100% - 16.753639px), calc(100% - 5.981152px) calc(100% - 12.691728px), calc(100% - 9.079625px) calc(100% - 9.079625px), calc(100% - 12.691728px) calc(100% - 5.981152px), calc(100% - 16.753639px) calc(100% - 3.460131px), calc(100% - 21.201536px) calc(100% - 1.580384px), calc(100% - 25.971597px) calc(100% - 0.405733px), calc(100% - 31px) calc(100% - 5.6843418860808E-14px), 31px calc(100% - 0px), 31px calc(100% - 0px), 25.9716456px calc(100% - 0.40573299999994px), 21.2016128px calc(100% - 1.5803839999999px), 16.7537272px calc(100% - 3.460131px), 12.6918144px calc(100% - 5.981152px), 9.0797px calc(100% - 9.079625px), 5.9812096px calc(100% - 12.691728px), 3.4601688px calc(100% - 16.753639px), 1.5804032px calc(100% - 21.201536px), 0.4057384px calc(100% - 25.971597px), 5.1322304417548E-31px calc(100% - 31px), 0px 31px);
hi @Sean_Wong as you probably know the issue is related to your blur when they overlap as you are using extremely high number 120px on each circle.
I would like to only mention that blur is one of most expensive CSS properties (computation) . It can be reduced by using will-change and/or transform: translateZ(0) but still 120px is way too high.
let say you will have square 100px x 100px
this is 10.000px plus blur sides roughy 115.000px. Each pixel has blur effect applied and these values has to be recalculated with each 1px mouse move. The blur should be used carefully with small numbers.
In a many cases you can see this or similar effect is used SVG instead.
m2c
Mr. RoryVB! Though I can’t understand these code. But it works! You save my project! So I can use clip-path instead of my overflow-hidden effect next time, right?“
Thanks, Stan. I learn a lot from your reply. I will make the blur lower
The code is a responsive clip-path calculation based on the shape of a SVG, in this case a square with border radius. You could use it in other projects, but it will always have these settings.
This is especially useful for when you want to create a shape that has static corners but varies in size, like these buttons for example. The corners will always stay the same, but the sizes of the object itself can change!
