Neumorphism Generator Online

How to Generate Neumorphism CSS Online

1. Set the Background Color: Use the color picker or paste a hex value (e.g., #e0e5ec). Neumorphism requires the element to sit on a background that exactly matches it — the effect breaks on pure white (#ffffff) or pure black (#000000) because there's no headroom to compute a lighter or darker shadow.
2. Tune Distance, Intensity, and Blur: Distance (2-50px) sets shadow offset on both axes — larger values look more elevated. Intensity (5-50%) controls how much lighter and darker the two shadow colors are versus the background. Blur (5-100px) softens the edges; a good starting ratio is blur ≈ 2 × distance.
3. Set Border Radius: Slider from 0-50px. Most neumorphism designs use 10-30px for a soft, pillow-like look. Set to 0 for sharp squares or push to 50px for fully rounded buttons.
4. Toggle Inset (Pressed) and Copy CSS: Switch on Inset (pressed style) for a recessed/concave look — useful for input fields and active button states. The right panel shows live preview and ready-to-paste CSS with background, border-radius, and the two-shadow box-shadow rule. Click "Copy CSS".

Why Use Neumorphism CSS?

Neumorphism — short for "new skeuomorphism" and also called Soft UI — was popularized by Alexander Plyuto's Dribbble concept in December 2019 and trended hard through 2020-2021 before settling into a niche aesthetic. The look is achieved entirely with two box-shadow declarations: one darker shadow offset toward the light source's shadow direction, and one lighter shadow offset toward the light. No images, no SVG — just CSS that ships in every modern browser.

• Decorative dashboards and concept UIs — Crypto wallets, fitness apps, and audio-control mockups use neumorphism to evoke physical tactility on Dribbble and Behance. The aesthetic suits non-critical surfaces (cards, hero sections, decorative panels).
• Toggle states and pressed buttons — Inset shadows simulate a pressed/recessed control. Pair an outset default state with an inset :active state for a believable physical-button interaction.
• Smart home and IoT control panels — Thermostat and dimmer interfaces lean on neumorphism because the look maps to real-world hardware knobs and switches. Used carefully alongside higher-contrast labels.
• Onboarding illustrations — Neumorphic icons and cards work well in marketing splash screens where decorative styling can carry contrast that interactive UI cannot.
• Dark-mode soft surfaces — Same recipe with a dark base (e.g., #2d3748) instead of light grey — creates the "dark neumorphism" variant common in audio apps and music players.
• Learning CSS box-shadow — The two-shadow recipe is one of the clearest demonstrations of how box-shadow accepts comma-separated layers; tweaking sliders teaches offset, blur, and color interaction faster than reading the spec.

Neumorphism vs Glassmorphism vs Claymorphism

Property	Neumorphism	Glassmorphism	Claymorphism
Core CSS	Two box-shadow (dark + light) on matching background	backdrop-filter: blur() + semi-transparent background	Outer box-shadow + inner highlight + soft border
Background dependency	Must match container exactly	Needs colorful/busy background behind to show blur	Independent of background
Browser support	box-shadow everywhere (IE9+)	backdrop-filter needs Safari 9+, Chrome 76+, Firefox 103+ (caniuse)	box-shadow everywhere (IE9+)
WCAG contrast	Fails by design — interactive elements blend into background	Variable — depends on overlay text contrast	Better — clay surfaces use distinct fills
Popularized	Late 2019 (Alexander Plyuto, Dribbble)	Mid-2020 (Michal Malewicz, "Glassmorphism in user interfaces")	2021
Best for	Decorative cards, toggles, hero sections	Modal overlays, sidebars, hero glass panels	Buttons, illustrations, playful UIs
Common pitfall	Invisible buttons	Unreadable text over blur	Heavy, cartoonish if overused

Neumorphism Recipe — Anatomy of the Generated CSS

Rule	Example value	Why
background	#e0e5ec	Light-grey base — extreme values like #fff or #000 leave no room to compute a lighter/darker shadow
border-radius	16px	Rounded but not pill — neumorphism rarely looks right at 0
box-shadow shadow 1	12px 12px 24px #bec3c9 (dark)	Bottom-right shadow simulates light coming from top-left
box-shadow shadow 2	-12px -12px 24px #ffffff (light)	Top-left highlight from the assumed light source
inset prefix	Add to both shadows for pressed/recessed look	Used for input fields, active buttons, toggled switches

Frequently Asked Questions

Why does neumorphism fail accessibility checks?

By design. The look depends on shadows that are only slightly darker and lighter than a matching background, so the visual edge between an interactive element (button, input, card) and its surroundings is intentionally faint. WCAG 2.2 requires interactive UI components to have at least a 3:1 contrast ratio against adjacent colors (Success Criterion 1.4.11 Non-text Contrast) — and neumorphic borders almost never clear that bar. The fix is to limit neumorphism to decorative surfaces and use a different style (outlined, filled, high-contrast) for buttons, links, and form fields.

Why does the effect break on pure white or pure black backgrounds?

The shadow colors are computed by brightening and darkening the base color by the Intensity percentage. On #ffffff, there's no headroom to compute a "lighter" shade — both shadows collapse toward the same color and the bump disappears. Same problem at #000000 going darker. Use a base in the #1a1a1a-#f0f0f0 range and you'll always have room on both sides.

Should I use inset or outset for buttons?

Use outset (default, no inset keyword) for the resting state of a button — it looks raised. Add inset to both shadows on :active or for a pressed/toggled state — it looks pushed in. Input fields look most natural with inset shadows applied permanently, because text inputs visually should be recessed.

What's the browser support for box-shadow with multiple shadows?

Universal across all modern browsers and back to IE9 (caniuse: box-shadow). The two-shadow recipe used here ships everywhere — no polyfills, no fallbacks. Performance is fine too; box-shadow is GPU-composited in Chromium and WebKit.

Neumorphism vs glassmorphism — which should I pick?

Different jobs. Neumorphism is for decorative surfaces that sit on a solid color and need a subtle 3D feel — dashboard cards, illustrations, toggles. Glassmorphism is for overlays that sit on top of a colorful or photographic background and need to feel translucent — modals, sidebars, navigation bars over images. If you need a translucent panel, use the Glassmorphism Generator. For a sharper, more accessible alternative to both, plain cards with box-shadow: 0 4px 12px rgba(0,0,0,0.08) still beats either trend on usability.

How do I make a dark-mode neumorphism design?

Pick a dark grey base — #2d3748, #1a202c, or #2a2d3a work well. Avoid pure black. Keep the same Intensity (15-25%) and the generator will produce a darker shadow toward black and a lighter shadow toward your base + 15% brightness. Dark neumorphism has the same contrast pitfalls as light — only use it on decorative cards, not on tappable controls.

Why does my neumorphism look flat when I increase blur too much?

Blur softens shadow edges. Past about 3× the distance value, the two shadows bleed into each other and cancel out — you lose the perceived depth. The sweet spot is blur ≈ 2 × distance for a soft pillow look, or blur ≈ 1 × distance for a sharper, more tactile look.

When should I avoid neumorphism entirely?

Three cases. Primary actions — sign-up buttons, checkout CTAs, anything where conversion matters — need to pop, and neumorphism makes them disappear. Forms with multiple fields — users get fatigued scanning faint borders. Content-heavy interfaces like article pages or admin tables — the visual noise of soft shadows on every card hurts scannability. Use neumorphism on hero sections, marketing cards, decorative widgets, and the occasional toggle — not as a system-wide design language.