Say Hi

UI Recipe

Neumorphism

Soft UI (neuomorphism) uses paired box-shadow values — light and dark — to create a raised or pressed plastic-like appearance on a matching background.

Raised

A single outward shadow pair creates the illusion of an element floating above the surface.

SQUARE
CIRCLE
PILL
.neumo-raised {
  box-shadow:
    -6px -6px 14px rgba(255,255,255,0.04),
    6px 6px 14px rgba(0,0,0,0.5);
}

Pressed

Swapping to inset shadows makes the element look pushed into the surface.

IN
SET
PRESSED
.neumo-pressed {
  box-shadow:
    inset -4px -4px 10px rgba(255,255,255,0.03),
    inset 4px 4px 10px rgba(0,0,0,0.5);
}

Convex

Combining outward and inset shadows creates a convex button — raised with a subtle inner bevel.

3D
3D
BUTTON
.neumo-convex {
  box-shadow:
    -6px -6px 14px rgba(255,255,255,0.04),
    6px 6px 14px rgba(0,0,0,0.5),
    inset -2px -2px 6px rgba(255,255,255,0.02),
    inset 2px 2px 6px rgba(0,0,0,0.3);
}

Key Principle

/* Background and element must share the same color */
background: #1e1238;

/* Light source top-left: white shadow, dark shadow bottom-right */
box-shadow:
  -6px -6px 14px rgba(255,255,255,0.04),  /* light */
  6px 6px 14px rgba(0,0,0,0.5);             /* dark */