Productive Toolbox

Neumorphism Generator

Design soft UI (neumorphism) cards and buttons with a live preview and copy the CSS box-shadow for raised or pressed elements.

Neumorphic
Related tools
CSS Gradient GeneratorCSS Mesh Gradient GeneratorGradient Text GeneratorCSS Box Shadow GeneratorCSS Glassmorphism GeneratorGlassmorphism Layer TesterCSS Button Style GeneratorCSS Animation Previewer
How Neumorphism Works
Neumorphism (new + skeuomorphism) makes flat interfaces look soft and physical. The trick is that the element has exactly the same color as its background; only two shadows separate it from the surface. Imagine a light in the top-left corner: the top-left edge catches a highlight and the bottom-right edge casts a shadow.
Raised
box-shadow: -8px -8px 16px #ffffff,
            8px 8px 16px #b3b3b3;
Pressed
box-shadow: inset -8px -8px 16px #ffffff,
            inset 8px 8px 16px #b3b3b3;
The light shadow is the background brightened by the intensity percentage and the dark shadow is the background darkened by the same amount. Both are offset by the distance in opposite directions and blurred by about twice the distance for a smooth edge.
Design Tips and Accessibility
  • Use a mid-light, low-saturation background. Off-whites and light grays (#e0e0e0 to #f0f0f0) show both shadows; pure white loses the highlight and saturated colors look muddy.
  • Keep it for surfaces, not for everything. Neumorphic cards and panels work well; a whole interface of soft buttons becomes hard to scan.
  • Give actions a second signal. Soft shadows alone rarely reach the 3:1 contrast WCAG asks for on control boundaries, so add a colored icon, a label with strong contrast or a visible focus ring.
  • Make pressed states obvious. Switching to inset shadows is subtle; pair it with a color or icon change for toggles and selected items.
How to Use the Neumorphism Generator
  1. 1Pick the background color: Choose the color of the page behind the element; neumorphism only works when the element and its background are the same color.
  2. 2Shape the shadow: Set the distance, blur and intensity of the shadows, the corner radius, and the direction the light comes from.
  3. 3Choose raised or pressed: Raised puts the shadows outside so the element seems to rise from the surface; pressed uses inset shadows so it looks pushed in.
  4. 4Copy the CSS: Copy the background, border-radius and box-shadow rules into your stylesheet, or start from a preset such as a card, a button or an input field.
Frequently Asked Questions
What is neumorphism?
A soft UI style that became popular on Dribbble around 2019–2020. Elements look extruded from, or pressed into, the background, because they share its color and are lit by two shadows: a light one on the side facing the light source and a dark one on the opposite side.
How is neumorphism made in CSS?
With two box-shadows on an element that has the same background color as its parent. For a #e0e0e0 background: box-shadow: -8px -8px 16px #ffffff, 8px 8px 16px #b3b3b3. The first shadow is lighter than the background, the second darker; adding inset to both makes the pressed version.
How are the shadow colors calculated?
Each red, green and blue value of the background is raised or lowered by the intensity percentage. At 20% intensity, #e0e0e0 (224) gives #ffffff for the light shadow (capped at 255) and #b3b3b3 (179) for the dark shadow.
Is neumorphism accessible?
Often not. Its low contrast makes buttons hard to tell apart from the background, and WCAG 2.1 asks for a contrast of at least 3:1 for the visual boundaries of controls. Add a visible border, an icon, a colored state or a stronger text color to key actions, and don't rely on shadow alone to show that something is pressed.
Does neumorphism work in dark mode?
Yes, but the effect is subtler because there is less room to go darker. Use a dark gray rather than black (for example #2d2d2d), and turn on dark mode here so the dark shadow is deepened more than the light one.
Why does the effect disappear on a white background?
A pure white background cannot have a lighter shadow, so only the dark half shows. Use an off-white such as #e0e0e0 or #f0f0f0 so both the highlight and the shadow are visible.
Related Tools
CSS Gradient Generator
Create linear and radial gradients with copy-ready CSS.
CSS Mesh Gradient Generator
Create trendy multi-color backgrounds.
Gradient Text Generator
Generate background-clip: text CSS code.
CSS Box Shadow Generator
Build layered shadows with live preview and copy-ready CSS.
CSS Glassmorphism Generator
Create frosted glass effects with live preview and copy-ready code.
Glassmorphism Layer Tester
Control backdrop-filter blur intensities.
CSS Button Style Generator
Design a button visually with color, border-radius, shadow, and hover effects. Get copy-ready CSS.
CSS Animation Previewer
Preview easing and cubic-bezier animations with live controls.
CSS Border-Radius Blob Maker
Create organic, non-round shapes.
Color Palette Extractor
Upload image to get 5 dominant colors.
Color Palette Contrast Grid
Test all palette text/background pairs for WCAG contrast.
Color Blindness Simulator
Apply SVG filters for accessibility preview.
Browse all 33 Design Tools →