Neumorphism and CSS

Neumorphism, a design trend generating considerable buzz, offers a minimalist, realistic UI—a modern take on skeuomorphism. Coined in a 2019 UX Collective post, it sparks ongoing debate within design and development communities regarding aesthetics, usability, accessibility, and practicality. Its impact is undeniable.

This article explores neumorphic effects achievable with CSS, examining arguments for and against its use in web interfaces.

Neumorphism as a User Interface

Neumorphism uniquely blends minimalism and skeuomorphism. Consider the minimalist aesthetic of Material Design contrasted with skeuomorphism's hyper-realism. Think of Apple's design evolution from the early 2000s to its current minimalist approach; neumorphism occupies a middle ground.

Neumorphic UI elements appear integrated with the background, as if extruded or inset. Their "soft UI" is defined by the use of soft shadows.

Comparing it to Material Design using a card component highlights their differences. A design perspective clarifies the distinctions.

This establishes the concept of neumorphism; let's delve into its CSS implementation.

Neumorphism and CSS

While seemingly simple—applying the box-shadow property—creating a neumorphic interface is more nuanced. It involves multiple box-shadow and background-color values for diverse effects.

Neumorphic Box Shadows

The box-shadow property refresher:

<code>box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];</code>

Adjustable options include: horizontal and vertical offset, blur radius, spread radius, and color. The inset keyword creates an inner shadow. Multiple shadows are applied using commas.

<code>box-shadow: 20px 20px 50px #00d2c6, 
            -30px -30px 60px #00ffff;</code>

Neumorphic UI elements utilize a light and a dark shadow for the "raised" effect. Varying the "light source" creates different combinations. Four combinations are possible by adjusting shadow placement.

CSS variables enhance abstraction:

<code>box-shadow: var(--h1) var(--v1) var(--blur1) var(--color-dark), 
            var(--h2) var(--v2) var(--blur2) var(--color-light);</code>

The inset keyword toggles between extruded and inset appearances.

Background Colors

The box-shadow affects edge appearance. The background-color should be transparent or match the underlying element's color. Solid or gradient backgrounds are possible. Gradients create convex or concave surface variations depending on alignment with shadows.

<code>.element {
  background: linear-gradient(var(--bg-angle), var(--bg-start), var(--bg-end));
  box-shadow: var(--h1) var(--v1) var(--color-dark), 
              var(--h2) var(--v2) var(--color-light);
}</code>

Neumorphism in Practice

Applying neumorphism to a simple button reveals limitations. Its background color must match the underlying element, hindering its ability to stand out. While text color adjustments, borders, or icons can improve visibility, a solid background often performs better than a gradient. An inset shadow on the active state enhances the "pressed" effect.

Inspired by real-world examples (router buttons and car control panels), improved button and toggle designs are presented. However, standard buttons generally offer superior UX.

Neumorphism's limitations become apparent with elements having multiple states (hover, active, focus, visited, error, success, warning, disabled). The subtle variations restrict customization needed for clear state distinctions. Clickable elements can become visually ambiguous.

Neumorphic elements also require more space due to shadows and rounded corners, making them unsuitable for small elements.

Michal Malewicz suggests applying neumorphism only to elements that already function well without it.

Accessibility and UX

Accessibility is a major concern. The subtle contrasts inherent in neumorphism create challenges for users with color blindness or low vision. Overuse can hinder page hierarchy and cause confusion regarding interactive elements. High contrast is crucial, and background colors should avoid extremes (white and black).

From a UX perspective, neumorphism shouldn't dominate a page. Overuse creates an overwhelming plastic effect and disrupts visual hierarchy.

Neumorphism is best used sparingly, as an accent to another design system, such as Material Design.

Conclusion

Neumorphism, while aesthetically pleasing and unique, has limitations. Its restrictive color palette and soft contrasts hinder usability and accessibility in interactive elements. It's best used sparingly, ideally integrated into existing design systems as an alternative for cards and static containers. It's unlikely to replace current design systems but offers a fresh approach to specific elements.

References

• Neumorphism in user interfaces
• Neumorphism — the zombie trend
• Let’s talk Neumorphism and Accessibility

The above is the detailed content of Neumorphism and CSS. For more information, please follow other related articles on the PHP Chinese website!