Neumorphism Generator
Create soft UI neumorphic shadows and effects.
Reviewed by Aygul Dovletova · Last reviewed
background: #e0e5ec;
border-radius: 16px;
box-shadow: 5px 5px 10px #c6cfdc,
-5px -5px 10px #f9fafb;How to Use the Neumorphism Generator
- Pick the surface color - start in the soft-neutral range (
#e0e5ec,#f0f0f3,#2a2d3afor dark mode). The same color is used for the element, the page, and the math that derives both shadow tones. - Set the size slider - this is the shared shadow offset and blur radius. A larger value produces a softer, more dramatic extrusion.
- Adjust intensity to change how far the two shadow colors sit from the surface lightness. Low intensity is subtle, high intensity is cartoonish.
- Pick the shape: Flat keeps the surface uniform, Concave adds a subtle inward gradient, Convex bulges outward, Pressed flips the shadows inside for an inset well.
- Set the border radius and copy the generated CSS.
What the Generator Outputs Under the Hood
A neumorphic surface is built from exactly two things: a background that matches its parent, and a box-shadow pair with opposing offsets. The tool computes the light and dark shadow colors by shifting the surface HSL lightness up and down by the intensity amount (implemented through the CSS Color Level 4 relative-color parsing the designer would hand-write as two color-mix(in srgb, ...) expressions). The output is therefore one element, one background, and one box-shadow rule of the form {size}px {size}px {size*2}px darkShade, -{size}px -{size}px {size*2}px lightShade. For the Pressed variant the generator swaps the order and prefixes both shadows with inset so the light catches the bottom-right interior instead of the top-left exterior. No filter passes, no pseudo-elements - everything is a single declaration the browser rasterizes as part of the element\'s own paint layer.
When Neumorphism Actually Helps
- Media-control surfaces where buttons need to read as physical (volume knobs, playback pads, thermostat dials).
- Calm, low-density dashboards where a single color field with gentle depth beats a grid of high-contrast cards.
- Touch-first tablet UIs where the large tap targets benefit from looking tactile and pushable.
- Prototypes of hardware companion apps (smart locks, appliances) where the software should echo the device case material.
- Decorative non-interactive surfaces: card frames, section dividers, image mounts.
The Accessibility Problem You Cannot Ignore
Neumorphism fails hard on contrast. WCAG 2.1 SC 1.4.11 (Non-text Contrast) asks UI components to maintain a 3:1 ratio against adjacent colors, and a neumorphic button is by construction the same color as its background plus two low-contrast shadows. On a #e0e5ec surface the light shadow is roughly #ffffff and the dark shadow roughly #a3b1c6 - the ratio of the button fill to the surrounding surface is 1.00:1, which is an automatic failure. This means screen-reader users are fine but low-vision sighted users, users with bright ambient lighting, and users with cheap LCDs simply cannot see the button edges. The usual remedies are: reserve the style for decoration only, pair every interactive surface with a secondary cue (a tinted icon, a colored focus ring, or a 1px border), or drop the style entirely in favor of a flat system that passes the ratio. Other edge cases include: shadows clipping when the element sits near a container edge, shadows disappearing inside a overflow: hidden parent, and Safari\'s slightly different blur falloff giving visibly different shadow softness than Chrome.
Why "Soft UI" Shadows Are Just box-shadow
The CSS Backgrounds and Borders Module Level 3 specifies box-shadow as an ordered list of shadows, each consisting of horizontal offset, vertical offset, blur radius, spread, color, and an optional inset keyword. Neumorphism is simply two shadows in that list where the second shadow is the spatial mirror of the first and the colors are a symmetric pair around the element\'s surface lightness in HSL (or, more accurately, in OKLCH if you want perceptually equal darkness on both sides - per Bjorn Ottosson\'s 2020 A perceptual color space for image processing, HSL mirrors look uneven at saturated hues because HSL lightness is not perceptually uniform). The reason the style works at all is the human visual system\'s assumption of an overhead light source: we read the top-left highlight and bottom-right shadow as evidence the surface bulges toward us. Flip the pair and the brain reads it as a dent - that is precisely how the Pressed variant is made.
How It Compares to the Alternatives
Material Design 3 uses elevation tokens (--md-sys-elevation-1 through -5) that produce similar depth with much better contrast because they add a subtle tint lift along with the shadows. Apple\'s Human Interface Guidelines since Big Sur use "vibrancy materials" (backdrop-filter on a grouped surface color) that give depth without the contrast cost. Skeuomorphism, the older 2007-2013 iOS look, used real gradients and inner highlights and paid dearly in visual noise. Neumorphism sits in a narrow niche between those three: quieter than skeuomorphism, more textured than Material, less data-heavy than vibrancy. Use it when the product is intentionally calm and the accessibility review has room for creative mitigation; reach for Material or flat whenever legibility is the top metric.
Frequently Asked Questions
Why does neumorphism fail WCAG 1.4.11 so often?
Because the button surface is the same color as the page and the only visual cues that distinguish it are two low-contrast shadows. The measured contrast of fill-to-surround is effectively 1:1, and the success criterion wants 3:1. Adding a faint colored border, a subtle icon tint, or a darker focus ring are the usual fixes, but the honest answer is that the style is decorative-first and you should avoid using it for primary actions.
What is the relationship between the two box-shadows?
They are a mirror pair: the dark shadow sits at a positive (right, down) offset and the light shadow at the exactly opposite negative offset. Their colors are symmetric around the surface lightness - the dark one is the surface lightness minus the intensity value, the light one is the surface lightness plus the same amount. Mirroring them in HSL is simple; mirroring them in OKLCH is perceptually more honest but the eye rarely tells the difference at low saturations.
Why is my neumorphic element showing a single flat shadow?
Most likely it is inside a parent with <code>overflow: hidden</code>, which clips the outward shadow on one or more sides. Also check that the parent background exactly matches the element background - if the parent is a fraction lighter or darker, the illusion collapses and the element reads as a plain card with a shadow.
Can I combine neumorphism with dark mode?
Yes, but you need to reduce the intensity sharply. Human perception of shadow contrast is non-linear: the same lightness delta that reads as "soft" on a <code>#e0e5ec</code> surface reads as "muddy smudges" on a <code>#1f2937</code> surface. Halve the intensity value for dark mode, or better, compute the shadow colors in OKLCH so both shadows are perceptually equidistant from the base.
What is the difference between Concave and Convex?
Both use the same outer shadow pair, but they add an inner linear gradient to the surface itself. Concave gradients run lighter-at-top-left to darker-at-bottom-right, which reads as a surface curving inward. Convex reverses the gradient, which reads as bulging outward. Flat omits the gradient. Pressed is an entirely different animal: it uses <code>inset</code> on both shadows so the element looks recessed into the page.
Does Pressed state replace :active?
No. Pressed is the static appearance of a button that is meant to look "pushed in" at rest - for example, a toggle showing the on state. The interactive :active state should still be wired up on every button regardless of which neumorphic variant you picked, and for accessibility you should also swap to a filled or high-contrast style on :focus-visible.
Why does the generator not use filter: drop-shadow?
Because drop-shadow respects the alpha channel of the shape and thus produces only a single shadow per filter entry, while neumorphism needs the shadow to clip to the element's border-box on both sides and to allow two independent colored shadows in a single declaration. Box-shadow is the correct primitive; drop-shadow is for PNG-with-transparency style rendering.
Does any data leave my browser?
No. The generator is a Preact component that stores the slider values in React state and serializes them into a CSS string when you press copy. No fetch request, no third-party script runs against your color choices, and the generated code never transits a server. You can disconnect your network and keep generating.
What happens on old iOS Safari?
All of this is vanilla box-shadow and background-color, both of which have been stable since Safari 5. The only compatibility note is that extremely large blur radii (above 100px) paint slightly differently between Blink and WebKit because of divergent Gaussian kernel approximations; for typical sizes 5-40px the output is visually identical.
Should I prefer OKLCH or HSL when deriving the shadow colors?
OKLCH (CSS Color Level 4) if you plan to use saturated or unusual base colors. Its lightness axis is perceptually uniform - courtesy of Bjorn Ottosson's 2020 paper that introduced the Oklab family - so a +10 lightness shift and a -10 lightness shift produce shadows that look equally distant from the base. HSL lightness is mathematically symmetric but perceptually skewed, which is why neumorphism built on HSL around saturated greens or oranges often looks lopsided.
More CSS & Design
Aspect Ratio Calculator
Calculate and visualize aspect ratios for any dimensions.
Open toolBlob Shape Generator
Generate organic blob shapes as SVG.
Open toolBorder Radius Generator
Create CSS border-radius with a visual corner editor.
Open toolCSS Box Shadow Generator
Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.
Open toolColor Palette Generator
Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).
Open toolColor Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool