Module 3: Neumorphism with Bootstrap

What Is Neumorphism?

Neumorphism (a blend of "new" and "skeuomorphism") creates an embossed or "pressed" look using dual shadows. Elements appear to be gently pressed into or raised from the background, like soft clay.

Key Principle: Background color must match element color for seamless integration. Bootstrap's var(--bs-body-bg) helps maintain consistency!

Bootstrap + Neumorphism Technique

HTML with Bootstrap:

<button class="btn neu-button btn-lg">
Click Me - Neumorphic Button
</button>

<input type="text" class="form-control neu-input"
placeholder="Type here...">

Custom CSS for Neumorphism:

.neu-button {
  background: var(--bs-body-bg);
  border-radius: var(--bs-border-radius-lg);

  /* Dual shadows */
  box-shadow:
    8px 8px 15px rgba(190, 190, 190, 0.8),
    -8px -8px 15px rgba(255, 255, 255, 0.9);
}

.neu-button:active {
  /* Inset for pressed effect */
  box-shadow:
    inset 8px 8px 15px rgba(190, 190, 190, 0.8),
    inset -8px -8px 15px rgba(255, 255, 255, 0.9);
}

✅ Bootstrap Utilities Used

btn, btn-lg – Button component
form-control – Form styling
var(--bs-body-bg) – Color consistency
var(--bs-border-radius-lg) – Rounded corners
card, card-body – Card structure

💡 How It Works

Two shadows at opposite angles simulate 3D light
Dark shadow (bottom-right) = shadow side
Light shadow (top-left) = highlighted side
inset makes shadows go inward (pressed)
Bootstrap variables ensure theme consistency

Interactive Examples

Neumorphic Buttons

Try clicking: Notice how the shadow changes from outset to inset, creating a pressed effect. Bootstrap's btn class provides base styling.

Neumorphic Forms

Your Name

Email Address

Message

Inset shadows: Form fields use inset shadows by default, making them appear recessed into the surface. Bootstrap's form-control provides structure.

Neumorphic Toggle

Click to toggle

Custom component: Pure CSS toggle switch with neumorphic styling. Combines raised knob with inset track.

Visual Comparison

Flat Design

No shadows

Raised (Outset)

Neumorphic Raised

Pressed (Inset)

Neumorphic Pressed

Advanced: Glassmorphism + Neumorphism

🎨 Hybrid Effect

Combine neumorphic shadows with glassmorphism blur for a futuristic, layered UI. This technique works best with colorful or textured backgrounds.

Pro tip: Use this for premium product cards, dashboard widgets, or creative portfolios. The combination creates depth and visual interest while maintaining modern aesthetics.

🧠 Atelier Reflection

Does the tactile feeling of neumorphism improve user interaction, or does it just add visual complexity? Consider: How does low contrast affect accessibility? When is this style appropriate vs. when is simpler flat design better?

Bootstrap advantage: Using CSS custom properties like var(--bs-body-bg) ensures neumorphic elements adapt to theme changes. If you switch to dark mode, shadows automatically adjust!