CSS Trends: Neumorphism
2020 was a good year… wait, wait, hear me out. 2020 was a good year for UI design. While the planet was burning, and society was consumed by a pandemic, the internet got sleek. From the deep box-shadow retro look, to scroll-based animations, to gradient text color and the return of glassmorphism, it’s hard to find a 2020 design trend that doesn’t stick the landing.
One of my favorite trends, though, is Neumorphism. It’s subtle. It’s sleek. It’s unfortunately not very accessible, but I digress! While the trend may face a few challenges to widespread adoption, it definitely has its place, and it’s so deceptively easy to achieve, it’s hard for a beginner to pass up.
What It Is
Neumorphism, also called “Soft UI,” is a design technique that involves using CSS box-shadows (plural) to lend buttons, cards, and containers (and everything else) a sense both of depth and of continuity. I have described it to friends as the “ghost-pushing-through-the-wall latex effect.”
The concept got its name from a predecessor: Skeuomorphism. Skeuomorphism is a design concept that entails decorating derivative objects with design cues related to their originals. Think light bulbs shaped like candle flames. In UI design, it involved making UI elements look like their physical counterparts. This is still a popular trend in audio plugins for music creation which are designed to look like the physical hardware (e.g., preamps and effect pedals) they emulate, with control knobs and light indicators, etc.
A more relatable example might be Apple’s old Calendar app — really, anything Apple, pre-2010 — which was designed to look like a paper desk calendar.
Skeumorphism was popular as a way to ease users’ transitions to digital tools by making them as similar as possible to the objects they replace. However, the trend was soon supplanted by the sleek minimalism of flat design. Neumorphism is essentially an amalgamation of these two design concepts, a sort of minimalist emulation. Half physical. Half digital. Only nearly three-dimensional.
How It Works
Neumorphism is, as I mentioned before, deceptively simple. It only takes a line or two of CSS using the box-shadow property, a stable feature long available to every browser (with some inevitable Internet Explorer caveats).
Box-shadow traditionally added some shading around elements that made them appear to hover above their respective backgrounds.
The main feature of neumorphic design is a second, lighter-colored box-shadow to provide the illusion of a highlight. This creates the illusion that element is raised but not separate.
In addition to the second box-shadow, one of the main features, and also one of the main constraints of Neumorphism is a monochromatic color scheme, at least where backgrounds and shadows are concerned. The raised foreground element and the background have to share a background-color property. The only cues to the separation are the box-shadows and possibly a linear gradient for the foreground element.
To achieve a convincing effect, it’s important that our hues blend. Generally, the effect works best with soft and pastel colors for your background. We’ll then need something just a few shades darker for our shadow (box-shadow #1) and something just a few shades lighter for our highlight (box-shadow #2). This is another constraint on neumorphism: black and white won’t work for shadows or backgrounds. For backgrounds, colors near the extreme ends of the shade/tint spectrum don’t give you anywhere to go for your shadow or highlight respectively. For shadows and highlights, black and white provide too much contrast.
Accessibility Issues
This concept of “too much contrast” I mentioned above is a perfect entry point for talking about neumorphism’s downfall: accessibility for people with visual impairments. It is a concept defined by its lack of contrast: blue elements on blue backgrounds with dark blue shadows and light blue highlights.
The Web Content Accessibility Guidelines released by W3C have clear and specific standards regarding contrast. Unfortunately, a lot of neumorphic designs are likely to fly in the face of WCAG criteria.
Contrast aside, there are other criticisms regarding the lack of textual labels and visual hierarchy. There’s a great article from UX Collective addressing some of the accessibility concerns.
Conclusion
I opened by saying how much I love neumorphism. Neumorphism is visually, aesthetically stunning. Unfortunately, the benefits stop there. Given the accessibility issues and the lack of compensatory benefit, neumorphism will have to undergo some changes if it is to have any staying power. However, accessibility is possible. As the concept matures, neumorphic designers are sure to find ways to meet WCAG criteria, at which point we can all enjoy the view together.
Resources:
Neumorphism- The hottest design trend in 2020 by yashant gyawali
