How to Add a Blur Effect to Your Wix Studio Header Using CSS

Are you looking to enhance the visual appeal of your Wix website? Adding a blur effect to your header can add a touch of elegance and sophistication. With Wix Studio, you can easily achieve this using CSS. In this guide, I'll walk you through the step-by-step process to accomplish this.

Step 1: Make the header transparent from the inspector

Before applying the blur effect, it's essential to make sure your header is transparent. Here's how to do it:

1. Select the header

2. Open Inspector, Under Design, Set the Background colour opacity to 0%.

Step 2: Turn on Developer Mode

Step 3: Open the Global.css File

Step 4: Paste the CSS Code

Step 5: Apply the CSS Class to Your Header

Step 6: Preview and Publish