How to Create a Custom Blurred and Rounded Container in Wix Studio Using CSS?

Web design is all about creating visually appealing and functional websites. One of the popular design trends is the use of blurred backgrounds and rounded containers, which can give a modern and sophisticated look to your website. If you're using Wix Studio, achieving this effect is possible with some custom CSS. In this guide, we'll walk you through the steps to create a custom blurred and rounded container in Wix Studio.

Understanding the CSS Properties

Before diving into the steps, let's understand the two main CSS properties we'll be using:

• border-radius: This property allows you to round the corners of an element. By setting a value, you determine how rounded the corners will be.

• backdrop-filter: This property lets you apply graphical effects, like blurring, to the area behind an element. It's a great way to create a frosted glass effect.

The Custom CSS Code

Here's the CSS code that combines both properties to achieve the desired effect:

.custom-blur-round-container{
    border-radius: 15px; /*Rounds the corner of the Container*/
    backdrop-filter: 10px; /*Blurs the Container behind the Container*/
    backdrop-color: rgba(255,255,255,0.7); /*Adds a semi-transparent white background to enhance the blur effect. The number 0.7 denotes the percent of opacity, 0 being 0% and 1 being 100%*/
}

Steps to Implement the CSS in Wix Studio

• Access the Wix Studio Editor: Start by logging into your Wix account and opening the desired website project. Navigate to the Wix Studio editor.

• Select the Container: Click on the container (or the element) you wish to style.

• Navigate to Settings: Go to the settings or properties panel. The exact name might vary based on the version of Wix Studio you're using.

• Add Custom CSS: Look for an option that allows you to add custom CSS or styles. It's usually labeled as "Custom CSS" or something similar.

• Paste the CSS Code: Copy the CSS code provided above and paste it into the custom CSS section.

• Apply the Class: Finally, assign the class custom-blur-round-container to the container or element you want to style. This will ensure that the styles are applied to that specific container.

Custom CSS can significantly enhance the look and feel of your Wix website. By understanding and applying the right properties, you can achieve modern design trends and make your website stand out. Happy designing!