WebbSpots › Forums › Avada Basic Design › Blur on Containers with Overlaps Not Blurred › CSS to Blur
WebbSpots
Keymaster
November 2, 2025 at 10:46 am
Post count: 18
Want just the column holding text/title (over a clear image) blurred?
Use css
.my-blur {
backdrop-filter:blur(25px)
}
Add a container with a background image. Set padding to display the image as you require.

Add a column with a css class that matches the css you are using. Add a text box (or whatever you want to display with the blurred background) to the column.

Add CSS to either Avada/Options/Custom CSS or to the Page CSS:

Result is a clear image, column that is blurred and clear text over it.
Thanks to Stephen Walker for the clean css to accomplish this!
