Question 1

What is neumorphism, and is it still in style?

Accepted Answer

Neumorphism (or 'neuromorphism', sometimes 'soft UI') is a design style where elements look like they're extruded from the background, same color as the surrounding surface, but with subtle paired shadows (one light, one dark) creating a tactile, embossed appearance. It exploded on Dribbble in 2019, peaked in 2020, and has since cooled as designers realized its biggest weakness: terrible accessibility. The style persists in niche contexts (smart-home dashboards, audio apps, fashion-forward portfolios) but isn't a mainstream production-app choice anymore.

Question 2

Why is neumorphism considered an accessibility problem?

Accepted Answer

Because it relies on tiny shadow differences against a same-color background to convey state and affordance, and those differences usually fail WCAG contrast minimums. A neumorphic button vs the background often measures 1.05:1 contrast where WCAG AA requires 3:1 for UI components. Users with low vision can't see the buttons; users in bright light can't distinguish pressed vs unpressed states. The aesthetic is beautiful in mockups and unusable for many real users. Mitigate with high-contrast active states, clear text labels, and never use neumorphism for primary actions.

Question 3

How does the light-source grid work?

Accepted Answer

The 9-point grid (3×3) controls which direction the 'light' is coming from. Top-left puts the highlight on the top-left edges and the shadow on the bottom-right, the most common neumorphic look. Top puts highlight on top, shadow on bottom (flat lighting). Center is no directional preference (visible shadows on all sides, used for 'floating' effect). The shadow CSS encodes this as offset values: top-left light = positive X and Y for the dark shadow, negative X and Y for the light shadow.

Question 4

What's the difference between flat, concave, convex, and pressed?

Accepted Answer

**Flat** has only outer shadows, the element sits on top of the surface. **Convex** adds a subtle gradient (lighter toward the light source), the element bulges outward. **Concave** reverses the gradient (darker toward the light source), the element looks pressed in but the shadows still imply 'raised'. **Pressed** uses inset shadows, the element looks recessed below the surface. Most neumorphic UIs mix: flat for cards, convex for buttons, pressed for the 'active' state of those buttons.

Question 5

Why does my neumorphic design only work on one background color?

Accepted Answer

Because neumorphism's shadows are calibrated to ONE specific base color. The light shadow is a tint of that color (~10% lighter); the dark shadow is a shade (~10% darker). Change the background and the shadows don't match anymore, they either disappear into the new color or stand out too much. Building a neumorphic design system means picking one or two surface colors and committing. Dark-mode neumorphism is doable but requires recalibrating every shadow.

Question 6

Is anything sent anywhere?

Accepted Answer

No. The generator computes shadow CSS from your inputs locally; nothing is uploaded. The live preview is a styled `

` in the same page. Open DevTools Network during use: zero outbound requests.

Question 7

What standards does Neumorphism Generator validate against?

Accepted Answer

Neumorphism Generator checks compliance with CSS box-shadow specification.

Question 8

What are the limitations of Neumorphism Generator?

Accepted Answer

Preview is CSS-only, does not generate images Accessibility may be poor, subtle shadows reduce perceivability Does not work well on dark backgrounds without adjustment

Mode	Visual Effect	Primary Use Case
Flat	Parallel to Surface	Cards & Panels
Convex	Outward Bulge	Primary Buttons
Concave	Inward Recess	Status Indicators
Pressed	Fully Recessed	Active Button State

Neumorphism Generator

Learn More

CSS Color Formats in 2026: HEX, RGB, HSL, and OKLCH Explained

Modern CSS in 2024: The Death of Preprocessors?

CSS Bridge: Refining AI-Generated UI for Production Performance

What is Neumorphism Generator?

Frequently Asked Questions

Technical Deep Dive

Neumorphism Generator

Pixel-Precise Output

Live Visual Preview

Copy-Paste Ready

01 Neumorphic Shape Modes

02 Implementation Guardrails

Runs 100% in your browser

You Might Also Need

Color Accessibility Palette Checker

ARIA Roles & Attributes Reference

Aspect Ratio Calculator

CSS Border Radius Generator