CSS Snippet:
Neumorphic Button
This CSS snippet creates a soft neumorphic button effect using matching background colours and layered shadows. The result is a raised, tactile look that feels more like a physical surface than a standard web button.
It’s a clean, minimal style that works well in soft UI designs and modern interfaces.
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 effect when you want a button to feel subtle, tactile, and design-led rather than bold or high contrast.
It works particularly well in minimal interfaces, soft UI layouts, and modern dashboard-style designs where you want depth without harsh borders.
Where to apply it
Apply this class to buttons where you want a soft raised effect created through shadow and background matching.
Common examples include:
• Soft UI / neumorphic layouts
• Minimal landing pages
• Dashboard interfaces
• Clean, neutral design systems
For the effect to work properly, the button background colour must match the background colour of the section or container it sits on.
Notes & Setup
Select your button in Wix Studio.
Add the class: neumorphic-button
Paste the CSS into your site's Custom CSS section.
Change the background/container the button is in to the same colour
Make sure the button background colour matches the section or container background colour, otherwise the effect will not look correct.
Adjust the border radius, shadow size, and background colour if you want a softer or more pronounced neumorphic style.
This CSS creates both the button styling and the optional pressed hover effect.
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-button {
padding: 22px; /* adjust size */
border-radius: 30px; /* adjust roundness */
background: #e0e0e0; /* must match container background */
border: none;
cursor: pointer;
box-shadow:
18px 18px 36px #c5c5c5, /* darker shadow */
-18px -18px 36px #fbfbfb; /* lighter highlight */
}
/* Text styling inside Wix button */
.neumorphic-button * {
color: #333 !important; /* change text colour */
font-weight: 600 !important; /* adjust text weight */
}
/* Optional pressed hover effect */
.neumorphic-button:hover {
box-shadow:
inset 8px 8px 16px #c5c5c5,
inset -8px -8px 16px #fbfbfb;
}
