Looking to give your Wix website a stylish, modern touch? A backdrop filter might be just what you need. It lets you blur or change the background behind certain elements, giving your site that sleek, frosted glass effect. Here’s how to easily add a backdrop filter in Wix Studio with just a few steps.
Step-by-Step Guide
Enable Coding Mode:
First things first, turn on Coding { } in Wix Studio. This unlocks Wix’s coding platform, and allows you to customize your website with CSS and other code.
Go to Page Code:
Once Dev Mode is on, head over to the Page Code section. You’ll find an option called global.css—this is where we’ll be adding the magic!
Paste Your Backdrop CSS Code:
In the global.css file, paste the following code:
Add Custom Class:
Now, go to the container or element where you want to apply the effect. In the Settings panel, find the field for Custom Classes. Type in the class name you used in the CSS filter name (like .bg-blur5px)
Changing Intensity of Effect:
Now you can change the intensity of the filter effect just by increasing/decreasing the value in the code.
Adding Combo Effect:
To add combo effect (Let say blur + grayscale) you have to create a new class called .combo and add ( space + grayscale (100%). Then select the element and add combo under custom classes
And that’s it! You’ve now added a sleek backdrop filter to your Wix Studio site. If you need more help or want to explore more design ideas, feel free to reach out—let’s make your website stand out!
Commenti