top of page

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

14 views0 comments


bottom of page