CSS Design Tool
CSS Neumorphic Element Designer
Design soft UI buttons, cards, inputs and toggles visually. Set the surface, the light source and the depth, watch the contrast audit, then copy clean production CSS.
- Live Preview
- CSS Generator
- Soft UI
- Contrast Audit
- Free
- No Signup
Controls
Element
Surface
The element uses this exact colour too — that is what makes it look moulded from the page.
Depth
Shape
Light source
Roughly twice the distance reads as soft depth. In Basic mode this follows the distance automatically.
Style presets
Size & border
A hairline edge is the simplest way to make a soft UI control visible to low-vision users.
Typography
Font stacks only — no external font is downloaded.
A muted tone is taken from the surface. Turn this off to set an exact colour and push the contrast higher.
States
A :focus-visible outline is always generated for interactive elements — keyboard users need it.
Content
Live preview
Contrast audit
— AAGenerated code
Your design never leaves this browser. The autosave writes to your own local storage only — no account, no upload.
What Is Neumorphism?
Neumorphism — often called soft UI — is a style where a control looks moulded out of the page rather than placed on top of it. It is a narrow effect with an exact recipe:
- The element matches its background. Not similar — identical. This is the whole premise, and getting it wrong is why the effect usually fails.
- Two shadows, not one. A lighter tint of the surface on the side facing the light, a darker tint on the opposite side.
- One light source. Every element on the page must be lit from the same corner or the illusion collapses.
- Generous rounding. Soft UI reads as moulded plastic; sharp corners fight that.
- A mid-tone surface. There has to be room to go both lighter and darker.
It is the mirror image of glassmorphism. Glass needs a busy, colourful background to blur; neumorphism needs a plain one to sculpt. Neither works on the other's canvas.
How to Create Neumorphism with CSS
The complete recipe is four declarations. This is what the designer generates:
.neu-card {
--neu-surface: #e0e5ec;
--neu-light: #ffffff; /* the surface, tinted up */
--neu-dark: #bec3c9; /* the surface, tinted down */
background: var(--neu-surface);
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark),
-12px -12px 24px var(--neu-light);
}
The two offsets are mirror images. Light comes from the top left, so the dark shadow falls to the
bottom right (+12px +12px) and the highlight sits at the top left (-12px -12px).
Flip both signs and the element appears lit from the other side.
To make it look pressed in rather than raised out, add inset to both shadows.
Nothing else changes — that single keyword is the entire difference between a button at rest and the same
button held down, which is exactly how the generated :active state works.
CSS Property Guide
| Property | What it does | Typical value |
|---|---|---|
background | Must equal the parent's background. The single most important line. | #e0e5ec |
box-shadow | Two comma-separated shadows — the dark one, then the light one. | 12px 12px 24px …, -12px -12px 24px … |
inset | Draws a shadow inside the box. Both shadows inset means pressed. | inset 10px 10px 20px … |
border-radius | Rounding. Soft UI needs a lot of it to read as moulded. | 16px – 32px |
| offset (distance) | How far the shadows are thrown. Larger reads as further off the page. | 8px – 20px |
| blur | Softness. Roughly twice the offset is the sweet spot. | 2 × distance |
| intensity | How far the two tints move from the surface. Drives edge visibility. | 10% – 25% |
linear-gradient | Optional. Tilts the surface itself for a convex or concave face. | linear-gradient(145deg, …) |
:focus-visible | Essential here — soft UI controls have no border to fall back on. | outline: 2px solid … |
The Accessibility Problem — and How to Work With It
It is worth being blunt: neumorphism is the least accessible of the popular UI styles, and that is a direct consequence of its recipe rather than bad implementations. When an element is the same colour as its background there is, by definition, zero contrast at its edge. WCAG 1.4.11 asks for 3:1 on the visual boundary of a control; a pure neumorphic button has none.
The audit panel in the designer reports the real numbers live. These are the practical mitigations:
Turn off the derived text colour and pick a genuinely dark or light tone. The surface can stay soft while the text does not.
A 1px edge at partial opacity keeps the soft look while giving the control a real boundary.
Without a border, a keyboard user has nothing else to go on. The generated CSS always includes :focus-visible.
Pressed and raised differ only in shadow direction. Pair them with a label, an icon or a colour change.
A few focal controls surrounded by conventional components works. A whole interface in soft UI does not.
Designs that look elegant on a calibrated monitor can vanish on a dim phone screen outdoors.
Use Cases
Transport controls are the classic fit — physical, tactile buttons on a calm surface.
Soft toggles and dials read as real switches, which suits device control panels.
A grid of moulded keys is one of the few places a full soft UI screen genuinely works.
The calm, low-contrast surface matches the tone these products aim for.
Pressed inputs and raised toggles make a settings list feel like hardware.
Where visual impact matters more than dense information, soft UI stands out.
One raised card on an otherwise conventional page draws the eye without a loud border.
A quick way to explore depth tokens before committing to a shadow scale.
Frequently Asked Questions
What is neumorphism?
Neumorphism, or soft UI, is a style where a control looks moulded out of the page rather than placed on top of it. The element uses exactly the same colour as its background, and depth comes from a pair of shadows: a lighter one on the side facing the light and a darker one on the opposite side.
How do I create neumorphism in CSS?
Give the element the same background colour as its parent, add a generous border-radius, then add two shadows in one box-shadow: one offset towards the light in a lighter tint of the surface, and one offset away from it in a darker tint. A blur of roughly twice the offset reads as soft depth.
What is the best background colour for neumorphism?
A mid-tone. Around #e0e5ec is the classic choice because there is room to go both lighter and darker from it. Pure white leaves nowhere for the highlight to go and pure black leaves nowhere for the shadow, so both kill the effect.
How do I make a neumorphic button?
Select Button as the element. The generated CSS gives it the surface colour, a rounded radius, the two-shadow pair, and a pressed state on :active that swaps the shadows to inset so the button appears to push in when clicked.
What is the difference between neumorphism and glassmorphism?
Neumorphism uses a surface-matched colour and paired shadows so controls look extruded from a plain background. Glassmorphism uses transparency and a blurred backdrop so a panel floats above a colourful one. Neumorphism needs a plain background; glassmorphism needs a busy one.
Why does my neumorphism effect not show?
Almost always because the element and its parent are different colours. The style depends on them matching exactly. Check also that the shadow tints actually differ from the surface — an intensity near zero produces two shadows the same colour as the background, which is invisible.
Is neumorphism accessible?
Not by default, and this is its main weakness. Because the element and background share a colour there is no border contrast, and low-contrast text is common. This tool shows the live WCAG ratio for your text against the surface and warns when the edge contrast is too low to see.
What contrast ratio does neumorphic text need?
The same as any other text: WCAG AA asks for 4.5:1 for body copy, or 3:1 for text at 24px and above or bold text at 19px and above. AAA asks for 7:1. The audit panel reports the live figure so you can adjust the text colour until it passes.
What is an inset box-shadow?
Adding the inset keyword draws the shadow inside the element instead of outside it. Neumorphism uses inset on both shadows to make a control look pressed into the surface, which is how the pressed shape and the :active state are built.
What do concave and convex mean here?
They add a subtle gradient across the element's own surface on top of the shadows. Convex lightens the side facing the light so the element looks to bulge outwards; concave darkens it so the element looks to dish inwards.
Can I generate HTML and CSS?
Yes. The code panel shows semantic HTML and the matching CSS, regenerated on every change. Copy either, copy both, or download a standalone HTML file that renders the element on its own matching surface.
Does the generator support dark mode neumorphism?
Yes. The Slate, Charcoal and Midnight surface presets are dark, and the shadow tints are derived from whatever surface you choose, so the same recipe works. Dark surfaces usually need a slightly higher intensity to stay visible.
Can I change the light source direction?
Yes. Pick any of the four corners. Both shadows flip together and the concave and convex gradients rotate to match, so the element stays lit consistently.
Does the tool work on mobile?
Yes. On narrow screens the three-column studio becomes Controls, Preview and Code tabs, and the control groups collapse into sections so the preview stays large enough to judge the effect.
Is this neumorphism generator free?
Yes. It is free, needs no account, and has no export limits or watermarks.
Can I use the generated CSS commercially?
Yes. The output is ordinary CSS built from the values you chose. Use it in personal, client or commercial work with no attribution required.
Should I use neumorphism for a whole interface?
Rarely. Because every control looks the same and nothing has a strong edge, a full neumorphic interface is hard to scan and hard to use. It works best on a small number of focal controls with conventional, high-contrast components around them.
Is my design uploaded anywhere?
No. The designer runs entirely in your browser. The autosave writes to your own browser storage only, and nothing is sent to a server.