What does this tool do?
The Neumorphism Generator lets you craft the soft-UI style shadow effect with a live preview. You adjust colour, size, corner radius and shadow intensity with sliders, toggle between a raised or pressed (inset) look, and copy the ready box-shadow CSS. It makes designing cards, buttons and panels easy for designers and frontend developers.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
Live preview and four controls
The tool shows your settings on a preview element that updates in real time. The colour picker sets the background tone, which is also the basis for both the light and dark shadows. The size slider controls shadow distance and blur, radius rounds the corners, and intensity tunes the contrast between the light and dark shadows. The inset checkbox makes the element look pressed into the surface, which is ideal for active button states and input fields.
How neumorphism works
The neumorphism effect places two opposing shadows, one light and one dark, over a background of the same colour to create the illusion that the element rises from the surface. The tool computes those two shadows automatically by lightening and darkening your chosen colour according to the intensity value. Key tip: the background and the element must share the same colour, otherwise the effect breaks. All CSS is generated in your browser, so no data is sent anywhere.
Frequently asked questions
What does the inset option do?
Inset moves the shadows inside the element rather than outside, so it looks sunken or pressed into the surface. It is useful for active button states and input fields.
How should I set up the background for the effect to look right?
The key trick is that the element's background and the page background share exactly the same colour. Apply the generated background value to both the element and its surrounding container.
What does the intensity setting change?
Intensity determines how much lighter and darker the shadows are derived from your chosen colour. Low values give a subtle, soft emboss; high values produce a more pronounced contrast.
Is Neumorphism Generator free?
Yes. Neumorphism Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Neumorphism Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.