// GENERATED CSS
/* adjust controls to generate */
Light Shadow
—
Dark Shadow
—
// generate neumorphic box shadows for any background color
Generate neumorphic box-shadow CSS for any background color. Create inset and raised soft UI effects with live preview and instant copy.
/* adjust controls to generate */
—
—
Choose or type your UI background color — the shadows are calculated from it.
Tune distance, blur, intensity, radius, and light angle to craft the perfect soft shape.
Click "Copy CSS" and paste the generated box-shadow into your stylesheet.
Neumorphism (also called soft UI) is a design style that simulates extruded plastic by casting two shadows — one light, one dark — from the background color itself. The result: elements that feel physically raised or pressed into the surface.
Neumorphism is a UI design trend that creates an embossed, soft-plastic feel by applying two box-shadow values — a lighter version and a darker version of the same background color — to simulate depth without hard borders.
Raised mode makes an element appear to pop out of the surface (convex). Inset mode makes it appear pressed into the surface (concave), achieved by adding the inset keyword to the box-shadow values.
The generator takes your background color and derives a lighter variant (mixed with white) and a darker variant (mixed with black) at your chosen intensity. These two shadows create the illusion of a single directional light source.
Neumorphism can have accessibility challenges since it relies on subtle shadows rather than color contrast for affordance. Always test with WCAG contrast tools and consider adding focus indicators or borders for interactive elements.
The generated box-shadow CSS works in all modern browsers including Chrome, Firefox, Safari, and Edge without any prefixes. It's a well-supported CSS property with near-universal browser support.
Yes — flat mode generates an equal shadow on all sides, creating a lifted look without directional lighting. It's great for subtle card elevation or floating button effects in minimalist UIs.
A CSS neumorphism generator is a visual tool that creates the box-shadow values needed to achieve the popular soft UI (neumorphic) design style. Rather than manually calculating light and dark shadow colors from your base background, the generator handles the math instantly — letting you focus on tuning the visual result.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
The neumorphism effect requires exactly two box-shadow layers on a single element:
For a top-left light source, the CSS looks like this:
.neu-card {
background: #e0e5ec;
box-shadow:
6px 6px 12px #b8bec7,
-6px -6px 12px #ffffff;
border-radius: 12px;
}
The key constraint: the background color of the element must match the page background. This is what makes neumorphism tricky to layer — elements literally blend into their parent surface.
This generator supports three shape modes that each communicate different interaction states:
inset keyword inside box-shadow. Ideal for active/pressed button states, text inputs, and toggles in the "on" position.Three parameters control the character of neumorphic shadows:
A common starting point: distance 10, blur 20, intensity 15%. From there, increase distance for a puffier feel or increase blur for a cloudier effect.
Light angle determines which corner or side the light source comes from. Convention in neumorphic design is top-left — matching the physical intuition of a lamp placed in the upper-left of a room. This generator supports all eight directions plus center (for the flat effect).
Consistency matters: if you use top-left for one component, use it everywhere on the same page. Mixing light angles within a layout breaks the physical illusion.
One well-known criticism of neumorphism is accessibility. The style relies on subtle shadows for visual affordance rather than color contrast — which can make interactive elements difficult to perceive for users with low vision or in bright ambient light.
Best practices to improve accessible neumorphic UIs:
:focus-visible outline on all interactive elements.border: 1px solid rgba(0,0,0,0.06)) for better definition.Neumorphism works best on mid-tone backgrounds — not pure white (#ffffff) and not pure black (#000000). On pure white, there is no room for a lighter shadow. On pure black, there is no room for a darker shadow.
Ideal background ranges:
#d0d8e8 to #f0f4f8 — the classic soft blue-grey range most associated with neumorphic designs.#1a1d27 to #2e323f — dark backgrounds work well with slightly higher intensity values (20–30%).#e8ddf5 (lavender) or #d5ecd8 (sage) create unique branded feels.The generator outputs a complete box-shadow declaration along with matching background and border-radius properties. Paste this directly into your component stylesheet. The output is clean, vendor-prefix-free CSS that works in all modern browsers.
For React or Vue components, you can also use the values directly as inline style objects — just convert the CSS property names to camelCase (boxShadow, borderRadius, background).