CSS Snippet:
Liquid Glow Container
This CSS snippet creates a soft, blurred gradient glow around a clean container, giving the appearance of a subtle “liquid light” effect. The glow sits behind the container and gently spreads outward, adding depth and colour without affecting the content inside.
It’s a modern, design-led style that instantly elevates simple layouts.
Difficulty:
Easy
Live preview
Liquid Glow
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 to create a visually rich section without relying on heavy backgrounds or complex layouts.
It works particularly well for highlighting important content while keeping the structure clean and minimal.
Where to apply it
Apply this class to containers that should stand out slightly from the rest of the page.
Common examples include:
• Feature highlights
• Call-to-action sections
• Hero content blocks
• Key information areas
This style works best when there is enough space around the container for the glow to be visible.
Notes & Setup
Select your container in Wix Studio.
Add the class: liquid-glow-container
Paste the CSS into your site's Custom CSS section.
You can adjust the gradient colours to match your brand.
Make sure there is enough space around the container so the glow 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
.liquid-glow-container {
position: relative;
padding: 24px 28px;
border-radius: 20px;
background: #ffffff;
overflow: visible;
z-index: 0;
}
.liquid-glow-container::before {
content: "";
position: absolute;
inset: -18px;
border-radius: 28px;
background: linear-gradient(135deg, #6366f1, #06b6d4, #ec4899);
filter: blur(24px);
opacity: 0.45;
z-index: -1;
transition: all 0.3s ease;
}
.liquid-glow-container:hover::before {
inset: -22px;
opacity: 0.55;
filter: blur(28px);
}
