CSS Snippet:
Gradient Glow Container
This CSS snippet creates a vibrant gradient container with a soft glow effect and subtle highlight overlay. The layered shadows and colour blending give it depth and a polished, modern UI feel.
It’s a visually rich style that works well for drawing attention to key sections.
Difficulty:
Easy
Live preview
Gradient 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 strong visual focal point on the page.
It works particularly well for highlighted content, promotional sections, or key messages where you want to stand out without using animations.
Where to apply it
Apply this class to containers that should stand out from the rest of the layout.
Common examples include:
• Call-to-action sections
• Highlighted features or offers
• Hero content blocks
• Promotional areas
This style is best used sparingly so it maintains its visual impact.
Notes & Setup
Select your container in Wix Studio.
Add the class: gradient-glow-container
Paste the CSS into your site's Custom CSS section.
You can adjust the gradient colours and shadow values to match your brand.
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
.gradient-glow-container {
padding: 24px 28px;
border-radius: 16px;
background: linear-gradient(135deg, #6366f1, #ec4899);
position: relative;
box-shadow:
0 12px 30px rgba(99,102,241,0.35),
0 6px 16px rgba(236,72,153,0.25);
transition: all 0.3s ease;
}
.gradient-glow-container * {
color: #ffffff;
}
.gradient-glow-container::before {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
background: linear-gradient(
120deg,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
pointer-events: none;
}
.gradient-glow-container:hover {
transform: translateY(-2px);
box-shadow:
0 18px 40px rgba(99,102,241,0.45),
0 8px 20px rgba(236,72,153,0.35);
}
