Neumorphism with CSS

Neumorphism (or "soft UI") is a design style that makes elements appear to extrude from or be pressed into the same surface they sit on. It is achieved entirely with carefully chosen inset and outer box-shadows.

Core Technique

Use two shadows on the same surface colour: one lighter (representing the light source) and one darker (the shadow). The element, its parent background, and both shadow colours must be in the same colour family.

Accessibility Warning

Neumorphic designs often have very low contrast and can be illegible for users with low vision. Always validate contrast ratios and provide sufficient visual cues beyond shadow alone.

Example

:root {
    --bg: #e0e5ec;
    --shadow-light:  #ffffff;
    --shadow-dark:   #a3b1c6;
}

/* Extruded element */
.neu-card {
    background: var(--bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow:
         8px  8px 16px var(--shadow-dark),
        -8px -8px 16px var(--shadow-light);
}

/* Inset / pressed element */
.neu-pressed {
    background: var(--bg);
    border-radius: 12px;
    padding: 1rem;
    box-shadow:
        inset  6px  6px 12px var(--shadow-dark),
        inset -6px -6px 12px var(--shadow-light);
}

/* Extruded button that presses on :active */
.neu-btn {
    background: var(--bg);
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    box-shadow: 5px 5px 10px var(--shadow-dark),
               -5px -5px 10px var(--shadow-light);
}
.neu-btn:active {
    box-shadow: inset 5px 5px 10px var(--shadow-dark),
                inset -5px -5px 10px var(--shadow-light);
}

CSS

Full Editor

Pro Tip

Neumorphism looks striking in mockups but often fails WCAG contrast requirements. Always add text labels, icons, or borders to convey state — never rely on the shadow alone to indicate active, selected, or error states.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned