ReviseAlgo Logo

Modern CSS

Neumorphism

Master CSS Neumorphism, covering dual box-shadow offsets, light source angles, extruded vs inset states, and contrast accessibility rules.

Last Updated: July 15, 2026 • 8 min read

1. Learning Objectives

In this lesson, you will master building Neumorphic (soft UI) components using CSS. By the end of this topic, you will be able to:

  • Identify the core styling rules of Neumorphism (color matching, light source alignment, and dual box shadows).
  • Create extruded (raised) surfaces using positive dual box shadows.
  • Create pressed (sunken) states using inset box shadows.
  • Evaluate color contrast accessibility issues related to soft UI designs.
  • Build interactive neumorphic buttons that change states on click.

2. Overview

Neumorphism (Soft UI) is a design style that mimics real-world extruded plastic surfaces. Elements appear as if they are shaped out of the background itself, rather than floating above it. This look is created by using matching background and element colors, combined with two box shadows: a light shadow on one side (representing light reflection) and a dark shadow on the opposite side (representing shadow falloff).

3. Why This Topic Matters

Neumorphism creates a unique look, but it has styling requirements and accessibility limits:

  • Color Match Rule: The element and the parent background must have the exact same color. If the colors do not match, the extruded plastic look will fail, and the card will look like a standard flat box.
  • Contrast Accessibility (WCAG compliance): Neumorphic designs use very soft shadows, resulting in low contrast. This can make buttons difficult to see for users with visual impairments. You must include supplementary cues (like clear typography or icons) to make controls accessible.

4. Real-World Analogy

Think of Neumorphism like **vacuum-forming a thin sheet of white plastic over objects**:

  • The Sheet (Matching Colors): The plastic sheet stretches over everything, keeping colors uniform across raised and flat surfaces.
  • The Raised Shape (Extruded state): A button pushing up against the sheet. Light from the top-left illuminates the top-left edge (light shadow) and casts a shadow on the bottom-right edge (dark shadow).
  • The Sunken Shape (Pressed state): Tapping the button pushes it down into the surface. The light now illuminates the inner bottom-right edge (inset light shadow) and casts a shadow inside the top-left edge (inset dark shadow).

5. Core Concepts

Neumorphic styling requires three configurations:

  • Matching Colors: The element's background color must be identical to the parent container's background color (usually a soft mid-tone gray like #e0e0e0).
  • Light Shadow (Top-Left): A white shadow offset to the top-left (e.g. box-shadow: -6px -6px 12px #ffffff) that represents reflecting light.
  • Dark Shadow (Bottom-Right): A dark shadow offset to the bottom-right (e.g. box-shadow: 6px 6px 12px #bebebe) that represents the cast shadow.
  • Pressed State (Inset): Toggling shadows to inset (e.g. box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff) creates a sunken, pressed look.
Button State CSS Shadow Configuration Visual Effect
Raised (Default) box-shadow: -6px -6px 10px #fff, 6px 6px 10px #bbb; Extruded surface. The button appears raised above the background.
Pressed (Active) box-shadow: inset 6px 6px 10px #bbb, inset -6px -6px 10px #fff; Sunken surface. The button appears pressed down.

6. Syntax & API Reference

Neumorphic shadows are declared together in a single box-shadow property, separated by a comma:

7. Visual Diagram

This diagram displays how light and dark shadows combine to create the 3D extruded look:

8. Live Example — Full Working Code

A sample HTML document showcasing raised cards and interactive pressed buttons:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the body background color from #e0e0e0 to white (#ffffff). Observe how the card loses its extruded 3D effect.
  2. Adjust the shadow blur parameters from 16px to 2px to see how hard edges affect the soft look.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Mismatched card and background colors Using different colors for the card and background, which breaks the soft, extruded surface effect. body { bg: white; }
.card { bg: gray; }		 Keep both background colors exactly the same (e.g. #e0e0e0).
Over-blurring or under-blurring shadows Setting blur radii that are too low (creating harsh borders) or too high (causing shadows to bleed into adjacent elements). blur: 0px (hard border lines) Set blur values to double the offset values (e.g. offset 6px, blur 12px).

11. Best Practices

  • Keep background and element colors identical: Ensure the background color of the element matches the parent container's background color exactly.
  • Use soft mid-tones: Stick to soft mid-tone grays or pastels (between #d0d0d0 and #eeeeee) to allow light white highlights and dark shadows to display. Avoid pure white or pure black backgrounds.
  • Follow light source angles: Ensure both shadows share a consistent light source angle. A top-left light source requires offsets like -5px -5px (light) and 5px 5px (dark).
  • Support accessibility with extra visual cues: Neumorphic shadows have low contrast. Add distinct text highlights, borders, or icons on hover/focus to support users with visual impairments.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
box-shadow (including inset) support Supported (10+) Supported (4+) Supported (5.1+) Supported (12+)

13. Interview Questions

🟢 Q1: Why is Neumorphism generally considered bad for accessibility (WCAG compliance)?

Answer: Neumorphism relies on very soft shadows and identical background and element colors. This results in low contrast (often far below the WCAG 4.5:1 ratio required for normal text or 3:1 for interface components). This makes elements difficult to see or identify as interactive for users with visual impairments.

14. Debugging Exercise

Identify why the card lacks a soft 3D extruded effect, and fix the CSS configuration:

View Solution

Diagnosis:
1. The card's background color (#ffffff) is different from the body's background color (#f7fafc), breaking the extruded surface effect.
2. On a pure white background (#ffffff), the top-left white shadow (#ffffff) becomes invisible, preventing the highlight from displaying. To fix this, change the background color of the body and card to a matching mid-tone gray (e.g. #e0e0e0) and update the shadow colors accordingly.

Fixed CSS:

15. Practice Exercises

Exercise 1: Toggle Switch Button

Build a custom toggle switch layout. Style the container as a sunken slot using inset shadows, and style the toggle knob as a raised circle using positive offsets.

16. Scenario-Based Challenge

The Calculator soft keypad Challenge:

An interactive web calculator needs a soft UI keyboard layout. The keys should look extruded from the background by default and sink into the surface (inset) when hovered or active. Outline the CSS shadow coordinates and transitions required to build this layout.

17. Quick Quiz

Q1: Which box-shadow parameter is used to create a sunken pressed look in neumorphic elements?

A) inset

B) spread

C) outset

Answer: A — The 'inset' parameter draws shadows inside the border, creating a sunken pressed effect.

18. Summary & Key Takeaways

  • • Neumorphic cards must have the exact same background color as their parent container.
  • • Pair soft UI styles with other visual indicators (like text borders or icons) to maintain interface accessibility.

19. Cheat Sheet

Value Type Usage Syntax Example
Dual Shadow Shadowing box-shadow: 4px 4px 8px #aaa, -4px -4px 8px #fff;