The soft-UI look, without guessing the numbers
Neumorphism is that soft, extruded style where buttons and cards look pressed out of the background instead of floating above it. The whole effect comes from one trick: two shadows instead of one. A dark shadow on the side away from the light, a light highlight on the side facing it. Get the balance right and the element looks molded from the surface.
Getting it right by hand means juggling two box-shadow values whose offsets mirror each other, plus colors that are just barely darker and lighter than the background. Tweak one and the illusion breaks. This generator keeps both shadows in sync while you drag.
Move the light by dragging
The part that usually trips people up is the light direction. Both shadows have to agree on where the light comes from, or the element looks wrong in a way that’s hard to name.
So instead of typing offsets, drag the shape. Wherever you pull it, that’s where the light moves, and both shadows update together. Pull the light to the top-left for the classic look, or somewhere unusual for a card that catches the eye. The offsets stay locked as mirror images automatically.
What each control does
- Distance sets how far the shadows sit from the element. More distance reads as more lifted.
- Blur softens the shadows. Low blur looks crisp and almost beveled; high blur looks pillowy.
- Intensity is how much darker and lighter the two shadows are than the base. Small numbers look subtle and expensive; large numbers look heavy.
- Shape swaps the surface: flat is a plain raised block, concave dips inward, convex bulges out, and pressed uses inset shadows so the element looks pushed into the page.
The one rule that makes or breaks it
Neumorphism only works when the element and its container share the same background color. The effect is the surface deforming, not a card sitting on top of something else. That’s why the preview here sits on the exact base color you pick.
This is also the style’s biggest weakness, so it’s worth saying plainly: low-contrast neumorphic buttons can be genuinely hard to see, especially for anyone with low vision. Use it for accents and showcase pieces, and lean on clearer affordances for the controls people actually need to find. A gorgeous design nobody can operate isn’t a win.
Questions people ask
Why do both shadows need opposite offsets?
Because a real raised surface casts a shadow on one side and catches light on the other. Mirroring the offsets fakes that. If both shadows pointed the same way, the element would look like it had two drop shadows, not depth.
What background color works best?
A light, slightly desaturated gray like #e0e5ec is the genre classic, but any mid-tone works. Pure white and pure black are the hard cases, because there’s no room to go lighter or darker, so the effect flattens out.
What’s the difference between flat, concave, and convex?
Flat is a solid raised block. Convex adds a subtle gradient that bulges toward you; concave reverses it so the surface dips inward. Pressed switches to inset shadows for a punched-in look. They share the same shadow logic, just with different surface treatment.
Is neumorphism accessible?
Used carefully, for accents, yes. Used for primary buttons with low contrast, often no. The soft edges that make it pretty also make boundaries faint, so always check that interactive elements stay visible and clearly tappable.
Can I use the output anywhere?
Yes. It’s plain border-radius, background, and box-shadow, so it drops into any CSS, a Tailwind arbitrary value, or a styled-component without changes.