Neumorphism (Soft UI) Generator
Generate soft UI (neumorphism) shadows with shape, light direction and presets. Copy CSS or Tailwind.
/* Give the parent the same background: #e0e0e0 */
border-radius: 50px;
background: #e0e0e0;
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;Presets
Style
Mid-tone colours work best; pure white or black leaves one shadow invisible.
Size and shadow
Low contrast is part of the style. Soft shadows alone don't make a button or input easy to see. Give controls a visible label, a focus outline and a 3:1 contrast edge or icon (WCAG 1.4.11).
Neumorphism (Soft UI) Generator FAQ
What is neumorphism in UI design?
Neumorphism, or soft UI, makes elements look extruded from the same material as the background. It uses one light shadow on the side facing the light and one dark shadow on the opposite side, usually on a light grey or pastel colour.
What is the difference between concave and convex?
Convex bulges out like a dome: its gradient runs from light on the side facing the light to dark on the far side. Concave dips in like a bowl, so the gradient is reversed. Pressed uses inset shadows instead of a gradient, for the active state of a button.
Why does my neumorphism shadow not show up?
Most often the parent has a different background colour from the element; both must match, such as #e0e0e0 on both. With white or near-black colours the light or dark shadow cannot get any lighter or darker, so pick a mid-tone.
Is neumorphism accessible?
Not on its own. Soft shadows give low contrast, so buttons and inputs can be hard to spot, which conflicts with WCAG 1.4.11 (3:1 contrast for control edges). Add a visible label or icon, a clear focus outline and a stronger edge for anything people need to click.
How do I make a pressed state for a neumorphic button?
Use the Button preset for the normal state and Pressed for the active state; Pressed swaps the shadows to inset. Put the second box-shadow in a :active rule, and the button will look pushed in while it is held down.
Is anything uploaded or saved?
No. The CSS is calculated in your browser and nothing is sent anywhere or kept after you leave the page.