What neumorphism is
Neumorphism — a blend of “new” and “skeuomorphism,” also called soft UI — is a visual style that makes interface elements look softly extruded from the surface they sit on, or gently pressed into it. Unlike the hard drop shadows of material design, neumorphism uses two soft shadows to suggest that a button or card is made of the same material as the background, just pushed up or down. The result is calm, tactile, and distinctive.
The effect is entirely CSS, and the Neumorphism Generator builds it for you: choose a colour and a few settings, watch a live preview, and copy the code.
The trick: two opposite shadows
The whole illusion rests on a single idea — light comes from one direction, so a raised object casts a dark shadow on one side and catches a highlight on the other. Neumorphism recreates this with two box-shadow values of equal offset but opposite sign: a darker shadow offset down-and-right, and a lighter highlight offset up-and-left. For a typical surface that looks like:
box-shadow: 20px 20px 40px #bebebe, -20px -20px 40px #ffffff;
The dark colour and light colour are derived from the base surface colour — one shade darker, one shade lighter. The generator computes both for you from a single base colour and an intensity setting, so the highlight and shadow always stay in balance. If you want to understand the underlying property in depth, our box-shadow generator guide covers how offset, blur, and spread combine, and the box-shadow generator lets you experiment with shadows generally.
Why the background colour is everything
The most common reason a neumorphic element looks wrong is a colour mismatch. The effect only works if the element’s background is the same colour as the page behind it. When they match, the soft shadows make the element appear to rise from or sink into a continuous surface. When they differ — say a white card on a grey page — the two shadows just look like a slightly odd drop shadow, and the magic evaporates.
That’s why the Neumorphism Generator renders its preview on a background of the same colour you pick, and why the generated CSS sets the element’s background explicitly. When you paste the code into your project, make sure the container behind the element uses that same colour.
The four shapes
Neumorphism comes in four common variations, and the generator offers all of them:
Flat keeps the surface a single solid colour with the two outer shadows — the classic raised look, good for cards and resting buttons. Convex adds a subtle gradient from light at the top to dark at the bottom, making the surface seem to bulge outward. Concave reverses that gradient so the surface appears to curve inward, like a shallow dish. Pressed moves both shadows inside the element using the inset keyword, so it looks pushed into the background — perfect for active, selected, or toggled-on states.
Switching between these in the live preview is the fastest way to feel the difference, and pairing a flat resting state with a pressed active state is a clean way to show interaction.
Distance, blur, and intensity
Three controls shape the feel. Distance is the shadow offset — larger values make the element seem to float higher above the surface. Blur softens the shadow edges; a good rule of thumb is roughly twice the distance for a natural, diffuse look. Intensity controls how far the light and dark colours diverge from the base — higher intensity gives a stronger, more dramatic effect, while lower intensity keeps it whisper-soft. Subtlety usually wins with neumorphism; if the shadows shout, the style stops feeling soft.
Using soft UI responsibly
Neumorphism’s defining quality — low contrast — is also its biggest weakness. Because everything is close in tone, neumorphic buttons and form fields can be genuinely hard to see, and they frequently fail accessibility contrast requirements. The honest guidance is to treat neumorphism as an accent style rather than the foundation of an interface. Use it for a hero card, a feature toggle, or a decorative control, but keep critical actions clearly visible, always provide a strong focus state for keyboard users, and verify that text and essential controls meet contrast guidelines. Neumorphism and glassmorphism share this trade-off; our glassmorphism guide discusses the same balance for frosted-glass surfaces.
From preview to production
Where neumorphism works best
Because of its low-contrast nature, neumorphism shines in specific places rather than everywhere. It works beautifully for toggles and switches, where the pressed (inset) state communicates “on” and the raised state communicates “off” with a satisfying physicality. It suits media players and dashboards, where a calm, monochrome aesthetic feels premium and the controls are large enough to read despite the soft contrast. It’s lovely for hero cards and feature highlights that draw the eye without shouting. Where it struggles is dense forms, long lists of small buttons, and anything a colour-blind or low-vision user must operate quickly — there, clarity beats style.
A practical tactic is to combine neumorphism with a small amount of colour or a clear icon to restore contrast where it matters. A soft-UI button with a brightly coloured icon, or a neumorphic card with a high-contrast text label, keeps the aesthetic while staying legible. Used as seasoning rather than the whole meal, the style ages far better.
Comparing soft UI with glassmorphism
Neumorphism is often mentioned alongside glassmorphism, and the two solve different problems. Neumorphism makes elements look carved from the same surface as the background; glassmorphism makes them look like frosted glass floating above a colourful backdrop. Glass works best over busy, vivid backgrounds; soft UI works best over flat, neutral ones. If your design has a rich gradient or photo behind the UI, the glassmorphism generator is likely the better fit; if it’s a calm single-colour surface, neumorphism is the natural choice.
Soft UI is one of those styles that’s hard to hand-code and easy to get subtly wrong, which is exactly what a generator is for. Dial in your base colour, pick a shape, tune the distance, blur, and intensity until the preview feels right, then copy the CSS from the Neumorphism Generator. Remember the golden rule on the way out: the element and its background must share the same colour, or the effect won’t land. Everything runs in your browser, so experiment freely — nothing you enter is stored.