Neumorphism (soft UI) card

<div class="neu">Soft UI</div>

:root {
    --dist: 8px;
    --blur: 16px;
    --radius: 18px;
}

.neu {
    padding: 32px 44px;
    border-radius: var(--radius);
    background: #e0e5ec;
    color: #4b5563;
    font-weight: 600;
    box-shadow:
        var(--dist) var(--dist) var(--blur) #a3b1c6,
        calc(var(--dist) * -1) calc(var(--dist) * -1) var(--blur) #ffffff;
}

How it works

Neumorphism (“new skeuomorphism”) makes an element look extruded from the background by using two shadows of the same blur:

• a dark shadow offset down-right (#a3b1c6),
• a light shadow offset up-left (#ffffff).

The illusion only works when the element and its background are the same color — here both are #e0e5ec. Adjust the offset distance and blur to make the surface feel higher or softer.

Accessibility note: low-contrast soft UI can be hard to read. Use it for decorative surfaces, and keep text and interactive states clearly visible.