How to create a container with a background that blurs anything beneath it?

Ask the community
, , ,
1

Question:
How can I create container with a background that blurs anything beneath it?

Product:
Wix Studio Editor

Answer
This is my solution to the problem. It’s a simple one but I didn’t need anything more than this. You can drag the width to be anything you want without touching the code. Only thing you really need to change is the text styles to fit your liking and the blur intensity.

how to style your code

Just copy and past the code in an iframe. Adjust the sizes for each device and you’re good to go!

image
image1258×1040 64.7 KB

Here’s the code

<div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; backdrop-filter: blur(30px);display: flex;justify-content: center;align-items: center;">
  
<p style="font-size: 24px; font-family: 'PT Sans', 'sans-serif'; color: white; font-weight: 300; line-height: 1.5; height: auto; text-align: center; width: 80%;">
  With our services, you can sell your home in a matter of days. Reinvent your home to show others the potential it has.
</p>
</div>
1 Like
2

This is called “glassmorphism” or “glass effect”!

Apple was actually the first one to introduce this design effect over a decade ago, but it didn’t really become popular on websites until like maybe 5 or 6 years ago. It is a HUGE deal that it is now possible on Wix sites! And it is a design style that has not “faded with time”. It is still very much used for modern websites.

This effect can be achieved on any editor or platform that allows CSS customization. So for now, only Wix Studio sites can get this effect.

If anyone doesn’t know how to create CSS, there are many websites that offer glassmorphism generator codes.

Here is one: https://hype4.academy/tools/glassmorphism-generator
And another: https://ui.glass/generator/

I am just going to add other words here that people usually search for when trying to find how to create this effect: blurred background, blurry box, blurred box, blur container, fuzzy box, blur effects, glass effect, glass background

And the Wix Studio video sample:

(You should probably update your post tags and select “Tutorial” instead of “Ask a question” that way people know you are showing them how to do something, not asking them how to do it.)

:star_struck:

3

Thanks a lot! This was my first time posting in the Wix forum so I didn’t quite know how it all worked. I’ll update my tags

1 Like