Neumorphism, often stylized as "new" + "skeuomorphism," is a modern user interface design trend that blends the minimalism of flat design with the tactile realism of skeuomorphism. It's characterized by its soft, extruded look, where UI elements appear to be molded directly from the background.
What is Neumorphism?
In essence, neumorphic design creates elements that are subtly raised or pressed into the background. This is achieved through the strategic use of shadows. Typically, an element has two shadows: a lighter, "highlight" shadow on one side (usually top-left) and a darker, "ambient" shadow on the opposite side (usually bottom-right).
Key Characteristics:
- Soft Shadows: Uses soft, diffused shadows to create depth.
- Single Background Color: Elements and the background share the same base color, making the shadows the primary differentiator.
- Subtle Depth: Creates a "molded" or "extruded" look rather than distinct borders or gradients.
- Minimalism: Relies on shape and shadow rather than bold colors or textures.
How to Create Neumorphic Elements
The core of neumorphism lies in CSS `box-shadow`. To achieve the signature look, you'll need to apply two shadows to an element:
- A shadow that mimics light hitting the element from above and to the left.
- A shadow that mimics the ambient light and the element pushing into the background from below and to the right.
Here's a basic example of how to create a neumorphic button:
.neumorphic-button {
padding: 15px 30px;
border: none;
border-radius: 10px;
background-color: #e0e5ec; /* Same as background */
color: #313540;
font-size: 1.1em;
cursor: pointer;
box-shadow: 5px 5px 10px #c7ccdb, -5px -5px 10px #ffffff;
transition: all 0.3s ease;
}
.neumorphic-button:active {
box-shadow: inset 3px 3px 7px #c7ccdb, inset -3px -3px 7px #ffffff;
color: #007bff;
}
The key is that the background color and the element's background color are the same. The magic happens with the opposing shadows. For "pressed" or "active" states, you invert the shadows using `inset`.
Pros and Cons
Neumorphism can create visually appealing and unique interfaces. However, it has accessibility challenges:
- Pros: Aesthetic appeal, unique look, can feel tactile.
- Cons: Low contrast ratios can make it difficult for users with visual impairments to distinguish elements. Clickable states can be ambiguous if not implemented carefully.
When using neumorphism, it's crucial to ensure sufficient contrast for text and interactive elements, perhaps by using slightly different background colors or adding subtle outlines where necessary.
Where to See It
While it had a surge in popularity, it's often used sparingly for specific components rather than an entire UI. You might find examples in:
Consider it a stylistic choice that can add a unique flair when used thoughtfully and with accessibility in mind.