Neumorphism in CSS

Neumorphism, also called Soft UI, is a visual design style that combines minimalism with subtle realism. Instead of using strong borders or sharp shadows, neumorphic interfaces create the illusion that elements are gently raised above or pressed into the background using carefully balanced light and shadow.

The effect became popular because it offers a clean appearance while adding depth that flat design often lacks. Although visually attractive, neumorphism introduces several usability challenges that designers and developers should understand before adopting it in production interfaces.

What Is Neumorphism?

Neumorphism is based on the idea that interface elements share nearly the same color as their background. Depth is created almost entirely through highlights and shadows instead of contrasting colors or visible borders.

.button {
  background: #e6e6e6;
  border-radius: 18px;

  box-shadow:
    8px 8px 18px rgba(0,0,0,.15),
   -8px -8px 18px rgba(255,255,255,.9);
}

The darker shadow simulates light being blocked on one side, while the lighter shadow represents reflected light on the opposite side. Together they create the impression of a raised object.

How the Illusion Works

Unlike traditional skeuomorphic interfaces that use textures and realistic images, neumorphism relies almost entirely on CSS shadows. Two shadows are usually enough to convince the eye that an element has physical depth.

• Background and component use nearly identical colors.
• A dark shadow creates depth.
• A light shadow simulates reflected light.
• Large blur radii soften every edge.
• Rounded corners strengthen the illusion.

Raised vs Pressed Components

Neumorphism typically uses two different states. Components can appear raised above the surface or pressed into it. Both effects rely on reversing shadow directions.

Creating Raised Elements

Raised components use two outer box shadows. One shadow is darker and offset downward, while the second shadow is lighter and offset upward.

.card {
  background: #ececec;

  box-shadow:
    10px 10px 22px rgba(0,0,0,.14),
   -10px -10px 22px rgba(255,255,255,.9);
}

Creating Pressed Elements

Inset shadows make components appear embedded inside the surface rather than floating above it.

.input {
  background: #ececec;

  box-shadow:
    inset 6px 6px 12px rgba(0,0,0,.15),
    inset -6px -6px 12px rgba(255,255,255,.85);
}

This approach is often used for text fields, selected buttons and toggle switches.

Why Rounded Corners Matter

Sharp corners make shadows appear unnatural. Neumorphism depends heavily on smooth curves that allow light to transition gradually around every edge.

• Rounded buttons.
• Rounded cards.
• Circular icons.
• Soft containers.
• Large border radii.

Choosing Background Colors

The classic neumorphic look usually uses light gray backgrounds because they make both bright and dark shadows clearly visible.

Choosing Shadow Values

The entire neumorphic effect depends on balanced shadows. If the shadows are too strong, the interface begins to resemble skeuomorphism. If they are too weak, elements become flat and difficult to distinguish from the background.

Buttons in Neumorphism

Buttons are one of the most common neumorphic components. They normally appear raised by default and become pressed while active, reinforcing the feeling of physical interaction.

.button:active {
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.16),
    inset -6px -6px 14px rgba(255,255,255,.9);
}

This transition between raised and inset shadows creates a satisfying visual response without changing the overall layout.

Cards and Panels

Dashboard widgets and profile cards often use neumorphism because the soft shadows naturally separate sections while maintaining a consistent visual language across the interface.

Icons

Circular icon containers fit the neumorphic style particularly well because the lighting wraps smoothly around curved edges. Many interfaces combine circular buttons with subtle shadows to create elegant toolbars.

Accessibility Challenges

One of the biggest criticisms of neumorphism is accessibility. Since elements often share nearly identical colors with the background, users may struggle to distinguish interactive controls.

• Low visual contrast.
• Buttons may not appear clickable.
• Inputs can blend into the background.
• Color-blind users may experience difficulties.
• WCAG contrast requirements are harder to satisfy.

Dark Mode

Neumorphism also works in dark themes, although the shadows become more subtle. Designers usually replace white highlights with lighter gray tones while keeping the same lighting direction.

.dark-card {
  background: #2f3136;

  box-shadow:
    8px 8px 18px rgba(0,0,0,.45),
   -8px -8px 18px rgba(255,255,255,.04);
}

Combining Neumorphism with Other Styles

Modern interfaces often blend neumorphism with flat design or glassmorphism instead of applying Soft UI everywhere. This hybrid approach improves usability while preserving the elegant appearance.

Performance

Unlike glassmorphism, neumorphism relies primarily on box-shadow, which is generally inexpensive for browsers to render. Even so, dozens of large blurred shadows may still affect scrolling performance on low-powered devices.

Common Mistakes

• Using shadows that are too dark.
• Mixing different light directions.
• Applying very small border radii.
• Creating interfaces with insufficient contrast.
• Adding excessive shadow blur.
• Using neumorphism for every single element.

Accessibility Considerations

Neumorphism often reduces contrast because highlights and shadows blend into the background. While this creates an elegant appearance, it can make controls difficult to distinguish, especially for users with visual impairments.

• Maintain sufficient color contrast.
• Provide visible keyboard focus states.
• Avoid relying only on shadows to indicate buttons.
• Ensure clickable areas remain obvious.
• Test the interface in both light and dark themes.

Performance

Neumorphic designs rely heavily on multiple box shadows and blur effects. While modern browsers handle them efficiently, large numbers of complex shadows may affect rendering performance on low-powered devices.

Light Theme vs Dark Theme

Traditional neumorphism works best on light gray backgrounds because highlights and shadows are naturally visible. Dark neumorphism is also possible but requires carefully balanced shadow colors and subtle highlights to preserve depth.

Common Mistakes

• Using backgrounds that are too colorful.
• Making shadows excessively strong.
• Applying neumorphism to every element.
• Ignoring accessibility and contrast.
• Animating multiple heavy shadows simultaneously.

When to Use Neumorphism

Frequently Asked Questions

Helpful CSS Tools

A CSS Neumorphism Generator quickly creates balanced highlight and shadow combinations, a Box Shadow Generator fine-tunes individual shadow values, a CSS Border Generator helps match rounded corners with the overall design, a CSS Glassmorphism Generator allows experimenting with hybrid interfaces, and a Color Palette Extractor helps choose harmonious neutral color schemes for neumorphic components.

Conclusion

Neumorphism offers a distinctive visual style that makes interface elements appear soft, tactile and integrated into the background. By combining subtle highlights, gentle shadows and restrained color palettes, designers can create elegant user interfaces that feel modern without overwhelming users. When paired with good accessibility practices and thoughtful interaction design, neumorphism remains an attractive technique for dashboards, creative portfolios and polished UI components.