CSS Snippet:
Glassmorphism Container
This CSS snippet creates a glassmorphism-style container using transparency, blur, and subtle borders. The effect mimics frosted glass, allowing background colours and gradients to softly show through.
It’s a modern, design-led style that adds depth without heavy shadows or solid blocks.
Difficulty:
Easy
Live preview
Glassmorphism
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this container when you want a clean, modern UI with a layered, translucent feel.
It works particularly well on gradient backgrounds, images, or colourful sections where the glass effect can be seen clearly.
Where to apply it
Apply this class to containers placed on top of visually rich backgrounds.
Common examples include:
• Hero sections with gradients or images
• Overlays on background images
• Modern SaaS or app-style layouts
• Feature sections with depth
This style relies on what sits behind it, so avoid using it on plain white backgrounds.
Notes & Setup
Select your container in Wix Studio.
Add the class: glass-container
Paste the CSS into your site's Custom CSS section.
For best results, place the container on top of a gradient or image background so the glass effect is visible.
If you don’t want the hover effect, simply remove the :hover section from the CSS.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
.glass-container {
padding: 24px 28px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
/* Text inside container */
.glass-container * {
color: #ffffff;
}
/* Optional hover */
.glass-container:hover {
background: rgba(255, 255, 255, 0.3);
}
