CSS Snippet:
Soft Shadow Container
This CSS snippet creates a clean container with a soft, subtle shadow to add depth without heavy styling. It’s designed to feel light, modern, and unobtrusive while still separating content from the background.
It’s a reliable, everyday style that works across almost any type of website.
Difficulty:
Easy
Live preview
Soft Shadow
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 simple, professional layout with a bit of depth.
It works well for almost any situation, making it a strong default choice when you don’t need a more stylised design.
Where to apply it
Apply this class to containers used for structuring content across your site.
Common examples include:
• Service or feature sections
• Content blocks
• Cards or panels
• Forms and information sections
This style works on both light and neutral backgrounds, making it one of the most versatile options.
Notes & Setup
Select your container in Wix Studio.
Add the class: soft-shadow-container
Paste the CSS into your site's Custom CSS section.
This style works on most backgrounds without any special setup.
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
.soft-shadow-container {
padding: 24px 28px;
border-radius: 16px;
background: #ffffff;
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(0, 0, 0, 0.04);
transition: all 0.25s ease;
}
/* Optional hover */
.soft-shadow-container:hover {
transform: translateY(-2px);
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.08),
0 4px 10px rgba(0, 0, 0, 0.05);
}
