CSS Neumorphism Tutorial: Create Modern Soft UI Elements

2 Mar 2026 · 12 min read

Neumorphism has emerged as one of the most striking design trends in modern web development, combining minimalism with subtle depth to create interfaces that feel both futuristic and tactile. This CSS neumorphism tutorial will guide you through creating stunning soft UI elements that elevate your web designs with sophisticated visual effects.

Also known as "soft UI" or "new skeuomorphism," neumorphism creates the illusion that elements are gently pressed into or extruded from the background surface. The effect relies on carefully crafted shadows and highlights to achieve a three-dimensional appearance that's both elegant and engaging.

What is Neumorphism and Why Use It in Modern Web Design

Neumorphism is a design style that creates subtle, realistic depth through the strategic use of shadows and highlights. Unlike traditional flat design or heavy skeuomorphism, neumorphism css achieves a perfect balance between minimalism and dimensional depth.

The core principle behind neumorphism design involves using two shadows: a light shadow on one side and a dark shadow on the opposite side. This creates the illusion that elements are either raised above or pressed into the background surface. The effect works best when the element and background colors are similar or identical.

Key benefits of implementing neumorphism in your designs include:

Enhanced User Experience: Neumorphic elements provide subtle visual feedback that guides users through interactions, making interfaces more intuitive and engaging.

Modern Aesthetic: The style offers a contemporary look that feels fresh while maintaining excellent usability and accessibility when implemented correctly.

Versatile Application: From buttons and cards to form inputs and navigation elements, neumorphism can enhance virtually any UI component.

Essential CSS Properties for Neumorphism Effects

Creating effective soft ui css requires mastering several key CSS properties. The foundation of neumorphism lies in the strategic use of box-shadow, combined with careful color selection and proper element sizing.

The Box-Shadow Foundation

The box-shadow property is the cornerstone of neumorphism. Each neumorphic element typically uses two shadows: one light and one dark. Here's the basic syntax for creating depth:

box-shadow: 
  8px 8px 16px #bebebe, /* Dark shadow */
  -8px -8px 16px #ffffff; /* Light shadow */
        

The first shadow creates depth by casting a darker tone, while the second shadow adds highlight by using a lighter shade. The positioning (positive and negative values) determines which direction the light appears to come from.

Color Theory for Neumorphism

Successful neumorphism relies on subtle color variations. The element should match or closely match the background color, with shadows created using slightly darker and lighter versions of the base color:

:root {
  --base-color: #e0e0e0;
  --light-shadow: #ffffff;
  --dark-shadow: #bebebe;
}
        

Try it yourself → Experiment with different shadow values and see the effects in real-time with our CSS Box Shadow Generator.

Open Box Shadow Generator

Creating Basic Neumorphic Elements: Buttons and Cards

Let's start with the most common neumorphic elements: buttons and cards. These foundational components will teach you the core principles that apply to all neumorphic designs.

Neumorphic Button Design

A well-designed neumorphic button should feel like it's gently raised from the background surface. Here's how to create an effective button:

.neuro-button {
  background: #e0e0e0;
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    8px 8px 16px #bebebe,
    -8px -8px 16px #ffffff;
}

.neuro-button:hover {
  box-shadow:
    12px 12px 20px #bebebe,
    -12px -12px 20px #ffffff;
}

.neuro-button:active {
  box-shadow:
    inset 4px 4px 8px #bebebe,
    inset -4px -4px 8px #ffffff;
}
        

Neumorphic Button

Notice how the :active state uses inset shadows to create the impression that the button is being pressed into the surface. This tactile feedback is crucial for user experience.

Neumorphic Card Components

Cards are perfect for showcasing neumorphism's ability to create subtle depth while maintaining clean, readable layouts:

.neuro-card {
  background: #e0e0e0;
  border-radius: 20px;
  padding: 24px;
  margin: 20px 0;
  box-shadow:
    15px 15px 30px #bebebe,
    -15px -15px 30px #ffffff;
}

.neuro-card h3 {
  color: #666;
  margin-bottom: 12px;
}

.neuro-card p {
  color: #888;
  line-height: 1.6;
}
        

Neumorphic Card

This card demonstrates the subtle depth effect achievable with neumorphism.

Advanced Neumorphism: Input Fields and Interactive Components

Moving beyond basic buttons and cards, let's explore how to create more sophisticated neumorphic elements like form inputs and interactive components that provide rich user feedback.

Neumorphic Input Fields

Input fields present a unique challenge in neumorphism design because they need to clearly indicate their function while maintaining the subtle aesthetic. The key is using inset shadows to create the impression of a recessed surface:

.neuro-input {
  background: #e0e0e0;
  border: none;
  border-radius: 12px;
  padding: 16px 20px;
  width: 100%;
  font-size: 16px;
  color: #666;
  outline: none;
  box-shadow:
    inset 6px 6px 12px #bebebe,
    inset -6px -6px 12px #ffffff;
}

.neuro-input:focus {
  box-shadow:
    inset 8px 8px 16px #bebebe,
    inset -8px -8px 16px #ffffff,
    0 0 0 3px rgba(124, 106, 255, 0.1);
}

.neuro-input::placeholder {
  color: #aaa;
}
        

Enter your text here...

Toggle Switches and Interactive Elements

Creating interactive toggle switches showcases neumorphism's ability to provide clear state feedback through shadow manipulation:

.neuro-toggle {
  width: 60px;
  height: 30px;
  background: #e0e0e0;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  box-shadow:
    inset 4px 4px 8px #bebebe,
    inset -4px -4px 8px #ffffff;
}

.neuro-toggle::before {
  content: '';
  width: 22px;
  height: 22px;
  background: #e0e0e0;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: all 0.3s ease;
  box-shadow:
    3px 3px 6px #bebebe,
    -3px -3px 6px #ffffff;
}

.neuro-toggle.active::before {
  left: 34px;
  box-shadow:
    2px 2px 4px #bebebe,
    -2px -2px 4px #ffffff;
}
        

This toggle switch uses a combination of inset shadows for the track and regular shadows for the moving handle, creating a realistic interaction that users can intuitively understand.

Accessibility Considerations and Best Practices for Neumorphic Design

While neumorphism creates visually appealing interfaces, it's crucial to maintain accessibility and usability standards. The subtle nature of neumorphic effects can sometimes make it challenging for users with visual impairments to distinguish interactive elements.

Contrast and Visibility Guidelines

The biggest challenge with neumorphism is maintaining adequate contrast ratios. Since the aesthetic relies on subtle color variations, it's important to ensure text remains readable and interactive elements are clearly identifiable:

/* Ensure sufficient text contrast */
.neuro-element {
  color: #444; /* Darker text for better contrast */
}

/* Add subtle borders for definition */
.neuro-button {
  border: 1px solid rgba(0, 0, 0, 0.1)