Neumorphism, also called soft UI, is a design style in which elements look extruded from their own background: a raised shape made of the same material, defined only by a light shadow and a dark shadow. It looks soft and modern, but it has a built-in problem: the shape and the background are the same colour. In AI Icon Creator's test, a neumorphic icon's edge reached at most 1.5:1 contrast against its page, and its muted symbol only 2.0:1 against its tile. That's why an app icon needs a twist: a solid plate of its own colour.
This guide explains what neumorphism is, how it works, why neumorphic icons struggle at small sizes and on Home Screens, and how to adapt the style for an app icon.
What is neumorphism?
Neumorphism is a UI style, short for "new skeuomorphism", in which a shape appears to push out of a surface that has the same colour as the shape itself. The Nielsen Norman Group describes the idea as a step after flat design that reintroduces subtle skeuomorphic elements, a combination of flat design's simplicity and realistic depth.
The name was popularised by the designer Michał Malewicz of Hype4 Academy. In his article on the trend, he traces it to a single Dribbble shot by the user alexplyuto, which gained more than 3,000 likes and set off a wave of similar concepts. Google searches for "neumorphism" stay at roughly 2,900 to 3,600 a month in the US, and searches for "neumorphism buttons" nearly doubled between autumn 2025 and August 2026, from about 260 to 480.
How does neumorphism work?
Neumorphism works with two shadows on a shape whose colour matches the background: a light one from the top left and a dark one from the bottom right. Malewicz notes that the background can't be fully black or fully white, because the light and dark shadows must both be visible on it. A raised element and a pressed element differ only in whether the shadows are inside or outside:
.neu {
background: #e0e5ec; /* same colour as the page */
border-radius: 28px;
box-shadow:
9px 9px 18px #a3b1c6,
/* dark shadow, bottom right */ -9px -9px 18px #ffffff; /* light shadow, top left */
}
.neu-pressed {
box-shadow:
inset 9px 9px 18px #a3b1c6,
inset -9px -9px 18px #ffffff;
}
The contrast problem with neumorphic icons
Neumorphic elements have very little contrast, because the fill is the same colour as the page and only faint shadows mark the edge. Malewicz himself points out that when the figure and the background are the same colour there's no contrast to measure, and that pressed states have too little contrast to show a change. He argues that cards can be forgiven if the important elements have strong contrast.
That advice matters for icons, because an icon is an important element. We tested it.
In AI Icon Creator's test, the same bell was built in CSS three ways on the same soft grey page, rendered, then shrunk to 60, 32 and 20 px. The contrast was measured from the renders with the WCAG formula:
| Version | Glyph vs tile | Tile vs page |
|---|---|---|
| Classic neumorphism | 2.0 : 1 | 1.5 : 1 (shadows only) |
| Stronger, blue glyph | 3.5 : 1 | 1.5 : 1 (shadows only) |
| Solid blue plate, white bell | 4.4 : 1 | 3.5 : 1 |
The classic version's muted grey bell measured 2.0:1 against its tile, below the 3:1 that WCAG asks of meaningful graphics, and its shadows reached at most 1.5:1 against the page. At 32 px the shadows shrink to a hair-thin halo and the bell fades. A stronger blue glyph fixed the symbol, but the tile still depends on faint shadows to exist. The solid plate had 3.5:1 against the page and 4.4:1 for its glyph, and stayed readable down to 20 px. Our guide to app icon colours explains the 3:1 rule.
Why neumorphism doesn't work as an app icon
Neumorphism doesn't work as an app icon because an app icon sits on a wallpaper, and the style only works when the shape matches its background colour. On a Home Screen, the background is never the icon's own colour.
The same neumorphic tile looks right on its own soft grey page. On a dark wallpaper it becomes a pale square with a glowing halo, and on a colourful one a pale square with a smudged shadow. The effect is gone, and the pale tile is only visible because of its brightness. The solid plate looks the same on all three. Our guide to keeping an icon legible at small sizes explains why an icon should carry its own contrast.
The stores add another limit: iOS and Google Play apply their own mask and shadow, and users can switch icons to dark or tinted looks that keep only lightness. An icon whose shape is defined by shadow and not by colour has nothing to hold on to. Our app icon sizes guide covers those modes.
Where neumorphic icons still work
Neumorphic icons still work inside an interface where you control the background: toggles, dashboards and controls in a calm, low-contrast product. If you use them, follow three rules. Keep every glyph and label at 3:1 or better against its tile. Give pressed and selected states a visible change of colour, not just an inverted shadow. And test on a real screen in bright light, where soft shadows fade first.
How to adapt neumorphism for an app icon
To adapt neumorphism for an app icon, keep its softness but give the icon its own colour: a solid plate, a strong symbol and gentle shading inside the icon.
- Give the icon its own coloured plate. The plate replaces the same-colour background.
- Use a strong glyph, white or dark, with at least 3:1 contrast against the plate.
- Keep the soft shading inside the icon: a gentle inner highlight and a small, soft shadow give the tactile feel without the edge problem.
- Test at 32 px and on light and dark wallpapers.
The result is close to claymorphism and soft 3D, which keep the softness and add colour. In AI Icon Creator, the soft matte styles, from the 14 app icon styles, do this for you. Compare them on your subject:
Neumorphism vs claymorphism, glassmorphism and skeuomorphism
| Style | Depth comes from | Contrast | App icon fit |
|---|---|---|---|
| Neumorphism | Two shadows on a same-colour surface | Very low | Poor: needs its own background |
| Claymorphism | Inner shadows, a soft outer shadow, colour | Good with colour | Good for consumer and kids' apps |
| Glassmorphism | Blur, translucency, a light edge | Depends on backdrop | Good with a saturated core |
| Skeuomorphism | Realistic materials and light | Good | Good for object-based apps |
Our guides to claymorphism, glassmorphism and skeuomorphism cover the others, and how to choose an app icon style compares them side by side.
Frequently asked questions
What is neumorphism?
Neumorphism, or soft UI, is a design style in which elements look extruded from a background of the same colour, defined by a light shadow and a dark shadow. Its name comes from "new skeuomorphism". It looks soft and modern, but it has very low contrast, which makes it hard to use for buttons and icons.
Are neumorphic icons accessible?
Neumorphic icons are hard to make accessible because the shape and the background are the same colour. In AI Icon Creator's test, the shadows reached at most 1.5:1 against the page, and a muted glyph only 2.0:1. Make the symbol at least 3:1 against its tile, and give pressed states a visible change of colour.
Can I use neumorphism for an app icon?
You can use neumorphism for an app icon only if you adapt it. The style needs its own background, and a Home Screen wallpaper is never that colour. Give the icon a solid coloured plate, use a strong symbol with at least 3:1 contrast, and keep the soft shading inside the icon.
Is neumorphism still popular?
Neumorphism is still searched for and used in some dashboards and controls, but it's rarely used for app icons because of the contrast problem. Searches for "neumorphism" have held at about 2,900 to 3,600 a month in the US. Styles that keep the softness and add colour, such as claymorphism and soft 3D, are more common in icons.
What is the difference between neumorphism and claymorphism?
Neumorphism extrudes a shape from a surface of the same colour using a light and a dark shadow, which leaves it with little contrast. Claymorphism floats a coloured, inflated shape above the page with inner highlights and a soft outer shadow, so it stays visible and looks friendlier.
Try your own subject in the soft styles: