Neumorphism Generator
About this generator
Most neumorphism generators on the web are one-trick tools — pick a surface color, get a rest-state button with hardcoded black/white shadows. Then you discover the press state is missing, the dark mode is missing, the contrast fails WCAG by default, and the Tailwind export doesn’t exist. This generator was built to fix exactly those gaps.
All three canonical depths — convex (raised), flat, concave (sunken) — live in one editor. All four interactive states — rest, hover, pressed, focus — render live so you can verify the press inverts to inset (the canonical neumorphic feedback) and the focus state shows a visible WCAG-compliant ring. The preview canvas renders the same recipe as a button, card, input, or toggle so you can sanity-check the surface across UI element types, not just one shape.
Three more differences worth calling out. HSL-derived shadow colours — the dual corner shadows are computed from your surface lightness ±10–14, so any custom hex produces a coherent recipe (not just the canonical #e0e5ec). Live WCAG contrast scoring — neumorphism has a notorious accessibility problem; this generator scores AA (4.5:1) and AAA (7:1) live on the inner ink color so you catch failures before you ship to the EU EAA / Section 508 audit. Six export formats — copy plain CSS, SCSS mixin, Tailwind arbitrary-value classes, styled-components, React inline-style, or Vue scoped CSS. Output includes the press inversion, focus-visible ring, and a prefers-reduced-motion guard automatically.
Permalink: every adjustment encodes into the URL hash so you can bookmark a tuned recipe or send it to a teammate. No login, no watermark, no paywall. Free and MIT-licensed.
Why use this Neumorphism Generator?
How to use it
Neumorphism CSS reference
| Property | Value | What it does |
|---|---|---|
box-shadow (convex) | D D B darkCorner, -D -D B lightCorner | The dual outer shadow. Distance D is the corner offset, Blur B softens the shadows. Dark corner at bottom-right + light corner at top-left = canonical "raised pillow". |
box-shadow (concave) | inset D D B darkCorner, inset -D -D B lightCorner | Inset version of the same recipe. Reads as a sunken well — used for inputs, toggles, and pressed-button states. |
background | linear-gradient(145deg, lighter, darker) | Subtle surface gradient sells the curvature. Reverse the stops for concave depth. Use a flat color for the flat depth mode. |
border-radius | 14–24px | Soft corners are the entire aesthetic. Sub-12px corners read as flat material; 30+ reads as overly-rounded skeumorphic. |
darker shadow color | hsl(base.h, base.s, base.l - 12%) | Derived from your base surface (not hardcoded). Subtracting 10–14 lightness produces the bottom-right corner shadow. Generator does this automatically. |
lighter shadow color | hsl(base.h, base.s, base.l + 10%) | Adding 8–14 lightness gives the top-left highlight. On dark surfaces, push to +14 to keep the highlight visible. |
:active flips to inset | box-shadow: inset …; | The pressed state inverts the shadow direction so the surface "dips in" under the finger. This is the canonical neumorphic press feedback. |
@media (prefers-reduced-motion: reduce) | transition: none | Smooth box-shadow transitions can trigger motion sensitivity. The generator wraps the transition in a reduced-motion query automatically. |
The two-shadow recipe is the entire neumorphic aesthetic. Get the dual corner colors right and the rest follows.
Production-ready patterns
.neu-button {
background: linear-gradient(145deg, #f0f4fa, #c5cad1);
color: #384153;
border-radius: 20px;
padding: 16px 28px;
border: none;
box-shadow:
8px 8px 20px rgba(167, 172, 180, 0.35),
-8px -8px 20px rgba(255, 255, 255, 0.9);
transition: box-shadow .25s ease, transform .15s ease;
}
.neu-button:active {
box-shadow:
inset 8px 8px 20px rgba(167, 172, 180, 0.35),
inset -8px -8px 20px rgba(255, 255, 255, 0.9);
transform: translateY(0.5px);
}.neu-input {
background: linear-gradient(145deg, #c5cad1, #f0f4fa);
color: #1a1a24;
border-radius: 14px;
padding: 14px 18px;
border: none;
outline: none;
box-shadow:
inset 6px 6px 14px rgba(167, 172, 180, 0.35),
inset -6px -6px 14px rgba(255, 255, 255, 0.9);
}
.neu-input:focus-visible {
box-shadow:
inset 6px 6px 14px rgba(167, 172, 180, 0.35),
inset -6px -6px 14px rgba(255, 255, 255, 0.9),
0 0 0 3px rgba(124, 108, 255, 0.4);
}.neu-dark {
background: linear-gradient(145deg, #232432, #1a1b24);
color: #dde0ea;
border-radius: 22px;
padding: 18px 32px;
border: none;
box-shadow:
10px 10px 22px rgba(0, 0, 0, 0.45),
-10px -10px 22px rgba(46, 49, 62, 0.95);
}Production tips
Frequently asked questions
What is neumorphism and when should I use it?
Neumorphism (sometimes called 'soft UI' or 'neomorphism') is a design aesthetic where UI elements appear to extrude from a soft monochromatic background using two carefully-balanced box-shadows — a darker shadow on one corner and a lighter highlight on the opposite corner — over a surface color that matches the page background. It peaked in popularity around 2020 and has remained a stylistic option for non-critical UI: toggles, decorative cards, music players, fitness apps, calculator interfaces, and onboarding screens. Use it as an accent rather than a wholesale aesthetic. The Apple Human Interface Guidelines, Google Material, and the GOV.UK design system all advise against full-page neumorphism because of contrast and affordance issues — but a single neumorphic toggle inside an otherwise-conventional UI reads as 'tactile' and 'premium' without triggering those problems.
Why does this generator have convex, flat, and concave depth modes instead of just one shape?
Because neumorphism is three states, not one. **Convex** (raised) is the canonical button look — the surface bulges out at you with a dual outer shadow. **Concave** (sunken) is the inverse — the surface dips inward with a dual inset shadow, perfect for inputs, toggles, recessed wells, and pressed-button states. **Flat** is the subtle middle ground — barely-raised with a soft pillow shadow, used for badges, pills, and surfaces that need depth without drawing attention. Most neumorphism generators on the web ship only the raised convex variant, which is exactly half the design language. Switch between all three on the same surface to see how the technique generalizes across UI elements.
Is neumorphism WCAG-accessible? I've heard it's an accessibility nightmare.
Honest answer: the classic #e0e5ec neumorphic palette with grey-on-grey text typically scores **3:1 to 4:1 contrast** — **BELOW the WCAG 2.2 AA threshold (4.5:1)** required for body text under the EU EAA (European Accessibility Act, enforceable June 2025), US Section 508, Canada ACA, and UK Equality Act. That's why this generator ships a live contrast checker scoring AA / AAA against the inner ink color. To make neumorphism accessibility-compliant: (1) Push ink darkness down so contrast clears 4.5:1 — try #1a1a24 on classic light, or #dde0ea on Cobalt. (2) Add a focus-visible ring (the generator includes a 3px violet ring on the Focus state tab automatically). (3) Reserve neumorphism for non-critical UI — toggles, decorative cards, secondary controls — and use high-contrast solid-color buttons for primary CTAs. (4) Audit with axe DevTools, Lighthouse, or WAVE before shipping. The classic raised-button-on-tonal-surface pattern fails Section 508 by default; this generator catches that at design time instead of audit time.
Neumorphism vs glassmorphism vs material design vs claymorphism — when to use what?
**Neumorphism**: soft UI, monochromatic surface with dual shadow — extrusion feel. Best for: toggles, calculators, fitness apps, music players, onboarding. Worst for: text-heavy pages, dashboards, CTA buttons. **Glassmorphism**: frosted translucent panel over a vivid background using backdrop-filter. Best for: hero sections, modals, sidebar overlays, music control bars over album art. Worst for: large surfaces on flat backgrounds (the glass disappears). **Material Design**: Google's design system — flat surfaces with realistic shadow elevation and bold color. Best for: Android apps, productivity tools, anything needing accessibility-first defaults. **Claymorphism**: a 2022 evolution of neumorphism with stronger contrast — colorful surfaces, more pronounced shadows, often with stroke outlines. Best for: kid-friendly apps, gamified UI. Decision rule: pick the aesthetic that matches your product's content density and contrast budget. We ship both a [glassmorphism generator](/generators/css-glassmorphism-generator/) and this one — drop a recipe in each and compare.
How does the Tailwind neumorphism export compare to writing arbitrary shadow utilities by hand?
The Tailwind export emits arbitrary-value square-bracket utilities — shadow-[8px_8px_20px_rgba(167,172,180,0.35),-8px_-8px_20px_rgba(255,255,255,0.9)] — with separate hover:shadow-[…] and active:shadow-[…] variants so the press state automatically flips to inset. The dual shadow requires Tailwind's arbitrary-value syntax because no preset utility token covers dual neumorphic shadows; writing it by hand requires precisely the same syntax. We use underscores to encode spaces (Tailwind's convention). Tailwind v3 (3.4.x) and Tailwind v4 alpha both consume the output identically. For users on **shadcn/ui**, **HeadlessUI**, **Radix Primitives** — none of those ship neumorphism, so this generator fills a real gap in those design system stacks. For **Material UI** / **MUI**, **Chakra UI**, **Ant Design**, **Mantine** — they all use flat or material aesthetics by design; if you need neumorphism inside one of those projects, this generator's CSS export drops in as a single class. To extract to tailwind.config.js as a token, copy the SCSS export instead — it gives you the dual-color variables directly.
Why does the press state flip from a raised shadow to an inset shadow?
Because that's the canonical neumorphic press feedback — the surface visually 'dips in' under the user's finger. A neumorphic button that just lowers translateY on press feels wrong; you lose the entire reason to use neumorphism, which is the perceived tactility. The generator's Pressed state tab automatically inverts the dual shadow from outer to inset, so the press feels like pushing a real button into a surface. This is the most-missed detail in competitor generators — most ship the rest-state-only and leave the press-state inversion as homework. The exported CSS includes the :active rule wired up with the inverted shadow plus a 0.5px translateY for the micro-press, all guarded by prefers-reduced-motion.
How do I do neumorphism in dark mode? The classic palette is light-only.
Dark-mode neumorphism is harder than light-mode neumorphism because the light-side highlight has to be MUCH brighter (relative to the surface) to remain visible. On a #1e1f29 Cobalt surface, the light corner shadow needs to be around #2e3142 (about +14 in HSL lightness) — substantially brighter than the +10 you'd use on a light surface. The generator's **Slate** and **Cobalt** palettes do this automatically — they're the same dual-shadow recipe with auto-derived corner colors recomputed for dark surfaces. You can also use the custom surface picker and any dark hex you choose; the generator's HSL-math derives the corner colors automatically so any custom dark color produces a coherent recipe. For OS-level light/dark switching, copy the CSS for both palettes and wrap each in @media (prefers-color-scheme: dark) — the rest of the recipe is identical. Modern CSS light-dark() color function (Chrome 123+, Safari 17.5+) makes this even cleaner if you can target evergreen browsers.
Why are the two shadow colors derived from my surface color, not hardcoded to <code>rgba(0,0,0,0.2)</code>?
Because hardcoded shadow colors break when you change the surface. The black-shadow + white-highlight recipe you see in 90% of neumorphism tutorials only works on the specific #e0e5ec surface it was tested on. Change the surface to mint, cobalt, or warm paper, and the shadows look wrong — a black shadow on mint looks muddy; a pure-white highlight on cobalt looks blown-out. The generator derives the dual shadow colors by shifting the surface color's HSL lightness — about -12 for the dark corner, +10 for the light corner (or ±14 on dark surfaces). The math takes one millisecond at render time and produces a coherent recipe for any surface color, including custom hex codes. The output CSS hardcodes the derived colors at export time so you don't need a CSS preprocessor — they're literal rgba values in the generated code.
Will more features be added?
Yes. The current release is Tier 1: depth modes + state tabs + 6 palettes + custom color + multi-component preview + WCAG checker + 6 export formats + OKLCH/P3 output + URL hash state. Planned for v1.1: preset library of 30 hand-curated production neumorphic recipes (calculator app, music player, fitness tracker, smart-home controls, finance dashboard patterns), light/dark side-by-side compare, history with undo/redo, save-to-localStorage personal library. Planned for v1.2: AI-suggested palette + depth combinations based on content density (Claude Haiku-powered), PNG/SVG export for design system docs, embed iframe code so you can drop the live preview into Notion / Confluence / Storybook. If you want a feature, drop a note in the public TODO.md or open a discussion on the repo.