Hi,
I have a background image with CSS Blur and i get the typical effect on the all borders (fade out effect).
On Photoshop that easy to fix, just increase image mask some pixels.
Here i was trying the same philosophy increasing the background size but the effect remains.
I really don´t like the effect on the borders, is there a work arround for this?
Rui
Turn the borders off for that class, then drop the whole thing in another div (without blur) and turn any borders back on. The blur effect will only affect the div that has the setting, as well as it's children (not parents though!). 
Here is is https://preview.webflow.com/preview/casa-da-autonomia?preview=52a96fc9d5d2d8593a217164b8ba08d1
OH! It looked like the white line on top and the teal outline on the bottom were getting blurred—I see now that's not the case!
I 100% recommend doing the blur in Photoshop when possible for something like this, as it reduces strain on the GPU and gives you an always-predictable outcome. Regardless, here's a workaround that will hide the blurry edges. You might want to play around with the div size and positioning, but this should get you started:
This topic was automatically closed after 60 days. New replies are no longer allowed.
