Neumorphism (Soft-UI) Generator
Design soft-UI neumorphic shadows on a live tactile preview — flat, concave, convex and pressed — then copy the CSS.
🎯 Neumorphism only works when the element and the page share this exact colour. The preview backdrop below uses it too.
Tap & hold the element to feel it press in.
Pick the corner the light comes from. The soft highlight lands on that side; the shadow falls opposite.
Now: light from .
🔒 100% in your browser — nothing is uploaded. Two opposite box-shadows (a dark one on the far side, a light highlight on the near side) are derived from your surface colour and light direction to fake soft, extruded depth.
Why you’ll love Neumorphism (Soft-UI) Generator
Instant & free
No signup, no paywall, no limits — Neumorphism (Soft-UI) Generator works the moment the page loads.
Completely private
Everything runs in your browser. Nothing you enter is ever uploaded or stored on a server.
Works on any device
Fully responsive and touch-friendly — use it on your phone, tablet or desktop.
Copy & export
Grab the CSS, SVG or a PNG in one click and drop it into your project.
How to use it
Open it
No download and no login — the tool is ready right at the top of this page.
Use it
Enter your details or start interacting. Everything updates live as you go.
Get your result
Copy, download or share your result in a single tap. That’s it.
About Neumorphism (Soft-UI) Generator
Neumorphism — "new skeuomorphism", or soft UI — is the design style that swept Dribbble around 2020: instead of cards floating above the page with a drop shadow, elements look extruded from the surface itself, like buttons moulded out of soft plastic. The trick is two opposite box-shadows: a dark shadow on the side away from the light and a pale highlight on the side facing it, both mixed from the surface colour so the element appears to grow out of the page.
This generator does that colour math for you. Pick a base surface colour (light or dark presets included), choose a shape — flat, concave, convex or the inset pressed state — and set where the light comes from with the 3×3 direction picker. Sliders control size, roundness, shadow distance, blur and contrast intensity, with an optional link that keeps blur at the classic 2× distance ratio. The live preview renders a card, circle or button, and you can press and hold it to feel the inset state.
The output is copy-ready CSS — border-radius, background and the two shadows — plus the one line people always miss: the page colour. Neumorphism only works when the element and its parent share the exact same colour, so the tool hands you both. It also warns when your base is so dark or so light that one of the two shadows has no room to show.
Popular uses
Frequently asked questions
Almost always because the page behind it is a different colour. The illusion depends on the element appearing to be carved from the surface, so the parent background must match the element background exactly — even a few shades off breaks it. Use the "Copy page colour" button and apply that background-color to the body or parent container.
Flat uses a single solid surface colour — the classic soft-UI card. Concave adds a gradient that darkens toward the light so the surface appears scooped inward, while convex reverses it so the surface bulges out like a dome. Pressed switches both shadows to inset, making the element look pushed into the page — the natural style for an active or toggled-on state.
The widely used rule of thumb is blur ≈ 2× the offset distance — 8px of distance with 16px of blur gives the soft, diffuse edge the style is known for. The generator has a link toggle that maintains this ratio automatically as you drag the distance slider; unlink it if you want a tighter or hazier look.
Yes — the tool ships dark presets around #2c2f36 and derives both shades from whatever base you pick. On very dark surfaces the dark shadow has little room to deepen, so the pale highlight carries most of the effect; the generator nudges the shades to stay visible and shows a hint when your base is so extreme that the effect will struggle.
Use it deliberately. The style is inherently low-contrast — edges are implied by soft shadows rather than borders — so it suits decorative panels, media widgets and dashboards better than dense text UI or critical controls. If you use it on buttons, keep a clearly different pressed state (this generator gives you one), visible focus rings, and text that meets contrast guidelines against the surface colour.
Neumorphism (Soft-UI) Generator is 100% free — no signup, no watermarks and no usage limits. It’s one of 200+ free tools we build and give away.
Yes — copy the code or download the image and use it freely in personal and commercial projects.
More Design & Visual Tools
From our collection of 317 free tools.
People also use
We built this. We can build yours.
Neumorphism (Soft-UI) Generator is one of 200+ free tools from Workaholic Developers — a software & AI studio. Need a website, app, AI agent or automation? Let’s talk.
🇮🇳 Built by Workaholic Developers
We built this little toy in days. Imagine what we’ll build for you.
AI agents, web apps, automation, custom tools — designed and engineered fast, on whatever tech fits the job. If you can describe it, we can build it.