Need support on blurr overlay / Glassmorphism Effect

Store Design

Topic summary

A user working with the Horizon theme on brainelements.fr sought help implementing a glassmorphism (blur overlay) effect on sections with transparent white backgrounds. They were uncertain which CSS file to modify.

Solutions Provided:

  • One contributor suggested using online glassmorphism CSS generators and noted that achieving Apple-style effects may require additional HTML layers or JavaScript for advanced customization.
  • Another contributor provided a specific CSS solution:
.background-image-container {
    filter: blur(5px);
}

Implementation:

  • The code should be added via: Online Store → Themes → Customize → Settings → Custom CSS tab
  • Alternative placement options include liquid settings or a new CSS file, depending on existing customizations

Resolution: The user confirmed the CSS solution worked successfully. An image was shared showing the blur effect applied to the background.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Good evening,

am currently working on opening a new site, brainelements.fr, and I have encountered a roadblock that I need some assistance with. I am using the Horizon theme and focusing on creating personalized sections, particularly with subgroup.

As you can see in the attached screenshot, I have implemented backgrounds and text with a slightly transparent white background effect. Now, I would like to enhance this design by adding a blur effect on top of the transparency. Despite my efforts to find solutions through various forums and consulting ChatGPT, nothing seems to be working. At this point, I am even uncertain about which code page I need to modify—whether it is base.css, section.css, or another file.

Could someone kindly guide me on where to make these modifications and what specific code I should be using to achieve the desired blur effect? Your help would be greatly appreciated.

Thank you in advance for your assistance.

image
image1827×688 446 KB

1 Like
2

Hi @tkev69150
Have you just tried any of the numerous glassmorphic CSS generators found online
Glassmorphism CSS Generator | SquarePlanet | SquarePlanet etc etc etc

Sure , some times to get the full effect like how apple does it you will need to add additional elements to that part of the code to create layers for different CSS behavior to get a total look. Or even use javascript.
This work can be an advanced customization and if your tweaking the feel take some time in the back and forth.

Reach out to me for services if you need this taken care of.

3

Hello @tkev69150 ,

I hope you are well!

Can you please share the store URL? It will be helpful for me to provide you the CSS which will blur the background.

4

Yes. It is brainelements.fr

5

Please copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

.background-image-container {
filter: blur(5px);
}

Now, this will appear like -

image
image1919×885 194 KB

6

No but I can, it is a good idea.

But, after, where you I add the code?

7

If i’m doing the customization it either goes in custom-css setting, liquid setting, or a new CSS file first before modifying base files if possible.
Depends on total needs though, like if you’ve already modified the CSS files may as well continue to try and minimize performance impact from having multiple CSS sources.

8

Wonderful, it works. Thanks a lot.