How to Add a Backdrop Filter in Wix Studio

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 Velo, 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-blur)

/* BACKDROP FILTER by CARSAR STUDIO [you can change stylename ".bg-blur" as ".bg-blur5px"

to organise the styling then apply .blur5px in custom classes of Wix Studio] */

.bg-blur

{

backdrop-filter: blur(5px);

}

.bg-grayscale

{

backdrop-filter: grayscale(100%);

}

.bg-invert

{

backdrop-filter: invert(100%);

}

.bg-saturate

{

backdrop-filter: saturate(50%);

}

.bg-brightness

{

backdrop-filter: brightness(50%);

}

.bg-sepia

{

backdrop-filter: sepia(100%);

}

.bg-contrast

{

backdrop-filter: contrast(180%);

}

.bg-opacity

{

backdrop-filter: opacity(50%);

}

.bg-huerotate

{

backdrop-filter: hue-rotate(180deg);

}

Wix Studio Magic: Why I Choose It for Custom Web Development

L

e

t'

s

C

o

l

l

a

b

o

r

a

t

e