Neumorphic List Template

A modern list template styled with the Neumorphism ("soft UI") design trend.

This component uses carefully crafted shadows to create the illusion that the list items are being pushed out from the background.

A screenshot of a list where each item appears extruded from the page in a 'soft UI' style.

Get Source Code Preview

About this Template

Neumorphism is a UI style that aims to mimic a soft, extruded plastic look. The core of the effect is achieved by applying multiple, inset box-shadow properties to an element. To work correctly, the element's background color must be the same as the page's background color. This template applies this technique to a semantic list of links, including a "pressed" state for active items.

Features

Neumorphic Effect: Achieves the "soft UI" look with two opposite box-shadow values (one light and one dark).
Interactive States: Includes both a default "extruded" state and an "inset" or pressed state for active list items.
Self-Contained: All CSS is scoped within the .neumorphic-list-template parent class to avoid style conflicts.
Easy Theming: Colors and shadow values are controlled by CSS variables for quick customization of the entire component.

Code Breakdown

The component is a simple unordered list (ul) where each list item contains an anchor tag (a) with the class .neumorphic-item.

The visual effect is created entirely in the CSS for .neumorphic-item. A single rule, background-color: var(--neu-bg-color);, ensures the item matches the main page background. The box-shadow property is given two comma-separated values. The first value creates a dark shadow on the bottom-right, and the second value creates a light shadow on the top-left, simulating a light source and creating the extruded illusion.

For the "pressed" state, an .active class changes the box-shadows to be inset, making the item appear pushed into the surface.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphic List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            /* Neumorphism requires the body bg color to match the component bg color */
            background-color: #e0e5ec; 
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: #555e69;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Neumorphic List Component Styles - Copy from here
           ========================================================================== */
        .neumorphic-list-template {
            --neu-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --neu-bg-color: #e0e5ec;
            --neu-primary-text-color: #555e69;
            --neu-accent-color: #3b82f6;
            --neu-light-shadow-color: #ffffff;
            --neu-dark-shadow-color: #a3b1c6;
            --neu-shadow-distance: 5px;
            --neu-shadow-blur: 15px;

font-family: var(--neu-font-family);
            color: var(--neu-primary-text-color);
            width: 100%;
            max-width: 500px;
        }

.neumorphic-list-template *,
        .neumorphic-list-template *::before,
        .neumorphic-list-template *::after {
            box-sizing: border-box;
        }
        
        .neumorphic-list-template .list-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .neumorphic-list-template .list-header h2 {
            font-size: 1.5rem;
            margin: 0;
            font-weight: 600;
        }
        
        .neumorphic-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 1.5rem;
        }

.neumorphic-item {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            padding: 1rem 1.5rem;
            text-decoration: none;
            color: inherit;
            border-radius: .75rem;
            background-color: var(--neu-bg-color); /* Matches body bg */
            
            /* The key Neumorphism effect */
            box-shadow: 
                var(--neu-shadow-distance) var(--neu-shadow-distance) var(--neu-shadow-blur) var(--neu-dark-shadow-color),
                calc(-1 * var(--neu-shadow-distance)) calc(-1 * var(--neu-shadow-distance)) var(--neu-shadow-blur) var(--neu-light-shadow-color);
            
            transition: box-shadow 0.2s ease-out, color 0.2s ease-out;
        }

.neumorphic-item:hover {
            color: var(--neu-accent-color);
        }

/* The "pressed" state */
        .neumorphic-item.active,
        .neumorphic-item:active {
            color: var(--neu-accent-color);
            box-shadow: 
                inset var(--neu-shadow-distance) var(--neu-shadow-distance) var(--neu-shadow-blur) var(--neu-dark-shadow-color),
                inset calc(-1 * var(--neu-shadow-distance)) calc(-1 * var(--neu-shadow-distance)) var(--neu-shadow-blur) var(--neu-light-shadow-color);
        }

.neumorphic-item-icon {
            font-size: 20px; /* Works well with Font Awesome */
            width: 24px;
            text-align: center;
        }
        
        .neumorphic-item-text {
            font-weight: 500;
        }

</style>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

<div class="neumorphic-list-template">
    <header class="list-header">
        <h2>App Settings</h2>
    </header>

<ul class="neumorphic-list">
        <li>
            <a href="#" class="neumorphic-item active">
                <i class="fa-solid fa-user neumorphic-item-icon"></i>
                <span class="neumorphic-item-text">Profile</span>
            </a>
        </li>
        <li>
            <a href="#" class="neumorphic-item">
                <i class="fa-solid fa-bell neumorphic-item-icon"></i>
                <span class="neumorphic-item-text">Notifications</span>
            </a>
        </li>
         <li>
            <a href="#" class="neumorphic-item">
                <i class="fa-solid fa-shield-halved neumorphic-item-icon"></i>
                <span class="neumorphic-item-text">Security & Privacy</span>
            </a>
        </li>
        <li>
            <a href="#" class="neumorphic-item">
                <i class="fa-solid fa-circle-question neumorphic-item-icon"></i>
                <span class="neumorphic-item-text">Help & Support</span>
            </a>
        </li>
    </ul>
</div>

</body>
</html>

View Output