Wix Studio is quite powerful and for most tasks, I don't need to write any custom code. However, if you are stuck on a problem that you know that you can fix with just writing some CSS or if you want to utilize CSS animations then Wix Studio provides a simple way to add it wherever to your site.
So, let's see how we can build a simple backdrop filter using CSS on Wix Studio.
Getting started:
Go to Wix Studio and click "Create New Site."
Select "Studio Template".
Select whatever template you like. In my case, I am selecting the ZiggyZag template.
Select an area where you want to apply the backdrop filter. In my case, I am selecting the header.
Select the curly braces in the sidebar and enable coding.
Simply add the code for the backdrop filter. For example:
.header {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
And it's as simple as that! Click preview and make the changes as you would like!
I hope this helped in your Wix Studio journey!
Comments