Neumorphism CSS Generator
Use the free Neumorphism CSS Generator above to design soft, extruded UI elements and copy the box-shadow code straight into your project. Below is a quick guide to what neumorphism is, how the CSS actually works, and when to use it — and when to reach for something else.
What is neumorphism?
Neumorphism — a blend of “new” and “skeuomorphism,” and often called soft UI — is a design style where elements look like they’re extruded from, or pressed into, the background. Instead of floating on top of the page like a Material Design card, a neumorphic element shares its background color and uses two opposing shadows — one light, one dark — to fake depth. The result is a soft, tactile, monochromatic interface that gained popularity around 2020 and remains a favorite for dashboards, music players, calculators, and minimalist concept designs.
How to use this neumorphism CSS generator
- Pick a background color — neumorphism works best on light or mid-tone greys.
- Set the size and border radius of your element.
- Adjust distance (shadow offset), intensity, and blur to control how raised it looks.
- Choose a shape: flat, concave, convex, or pressed (inset).
- Copy the generated CSS and paste it into your stylesheet.
How neumorphism works in CSS
The whole effect comes from a single box-shadow rule with two shadows. The element matches the background color; a dark shadow is cast on the bottom-right and a light shadow on the top-left. Because the light source is implied as top-left, this tricks the eye into reading the element as raised:
.neumorphic {
border-radius: 30px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;
}The dark color (#bebebe) is a slightly darker shade of the background, and the light color (#ffffff) is a slightly lighter shade. The two offsets mirror each other. To make the element look pressed in instead of raised, add the inset keyword to both shadows:
.neumorphic-pressed {
border-radius: 30px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bebebe, inset -12px -12px 24px #ffffff;
}The generator above handles all of this math for you, including the matching light and dark shades for any base color.
Is neumorphism accessible?
This is the most important thing to know before shipping neumorphism to real users. Because neumorphic elements share their background color and rely on subtle shadows, they often have very low contrast. That creates real problems:
- Poor visibility for users with low vision — element edges can be almost invisible against the background.
- Weak affordance — buttons don’t look clickable, so users can’t tell what’s interactive.
- Contrast failures — soft shadows rarely meet WCAG non-text contrast requirements for UI boundaries.
You can still use neumorphism responsibly: keep text contrast high against the background, use the style for accents rather than critical controls, add clear hover, focus, and active states, and consider a subtle border or color shift so interactive elements are obviously interactive. Use the soft look to enhance a design — not as the only signal that something can be tapped.
Browser support
Neumorphism relies entirely on box-shadow, which is supported in every modern browser — Chrome, Firefox, Safari, and Edge — with no vendor prefixes required. In short, if a browser can render a shadow, it can render neumorphism, so support is effectively universal today.
Neumorphism vs glassmorphism
The two trends are often confused. Neumorphism uses matching colors and dual shadows for a soft, solid, extruded look. Glassmorphism uses background blur and transparency for a frosted-glass effect with elements layered over a colorful backdrop. If the frosted look is what you’re after, try the Glassmorphism CSS Generator. To build full neumorphic buttons with hover states, the CSS Button Generator pairs well with this tool.
Frequently asked questions
What is neumorphism in CSS?
Neumorphism in CSS is a soft UI style created with a single box-shadow rule that uses two shadows — one light and one dark — on an element that shares its background color, making it appear extruded from or pressed into the page.
Why does neumorphism use two shadows?
The two shadows simulate a single light source. A light shadow on the top-left and a dark shadow on the bottom-right convince the eye that the element is raised; adding the inset keyword to both flips the effect so it looks pressed in.
Is neumorphism bad for accessibility?
It can be. Low contrast and weak affordance make neumorphic elements hard to see and hard to recognize as interactive. It’s usable if you keep text contrast high, add clear focus and hover states, and avoid relying on it alone for critical controls.
Is neumorphism still relevant in 2026?
Neumorphism peaked as a trend around 2020 but remains popular for concept designs, dashboards, and minimalist interfaces. Used as an accent rather than an entire interface, it still looks fresh and distinctive.
Does neumorphism work in dark mode?
Yes. The technique works on any base color — for dark mode, use a dark grey background with an even darker shadow and a subtly lighter highlight. This generator produces matching shadow shades automatically for any color you choose.
Can I use neumorphism on buttons?
Yes, neumorphic buttons are one of the most common uses. Just make sure they have obvious hover, focus, and active states so users know they’re interactive, since the soft style can otherwise hide that a button is clickable.