CSS Snippet:
Neumorphic Container
This CSS snippet creates a soft, raised container using a neumorphic design style. By combining light and shadow in opposite directions, it gives the appearance of a surface that is gently lifted from the background.
The result is a clean, modern UI effect that works well for subtle, design-led layouts.
Difficulty:
Easy
Live preview
Neumorphism
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 soft, minimal design that feels more refined than standard cards or boxed layouts.
It works well for sections, feature blocks, or UI-style layouts where you want depth without heavy borders or strong contrast.
Where to apply it
Apply this class to containers that sit on a consistent background colour.
Common examples include:
• Feature or service blocks
• Dashboard-style layouts
• Soft UI sections
• Minimal card designs
This style works best when used across a consistent section rather than mixed with lots of contrasting elements.
Notes & Setup
Select your container in Wix Studio.
Add the class: neumorphic-container
Paste the CSS into your site's Custom CSS section.
Make sure the background colour of the section matches the container colour (#e0e0e0). This is essential for the effect to work properly.
If the background doesn’t match, the shadows will look incorrect and the design will appear flat.
If you don’t want the hover lift effect, you can 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
.neumorphic-container {
padding: 32px;
border-radius: 20px;
background: #e0e0e0;
box-shadow:
8px 8px 16px rgba(0, 0, 0, 0.15),
-8px -8px 16px rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
}
.neumorphic-container:hover {
transform: translateY(-4px);
box-shadow:
12px 12px 24px rgba(0, 0, 0, 0.18),
-12px -12px 24px rgba(255, 255, 255, 0.8);
}
