Neumorfisme CSS Design Volledige Gids

Neumorfisme ontstond in 2020 als designtrend die skeuomorfisme en flat design combineert. Het creëert de illusie van elementen die uit de achtergrond steken of erin worden gedrukt met zorgvuldig geplaatste schaduwen.

De techniek is gebaseerd op een monochromatisch palet en twee tegengestelde schaduwen — een lichte en een donkere — op hetzelfde element. Het begrijpen van de wiskunde erachter levert consistente, professionele resultaten op.

Wat is neumorfisme

Neumorfisme creëert een zacht, geëxtrudeerd uiterlijk door een lichte schaduw linksboven en een donkere schaduw rechtsonder te plaatsen. De achtergrond en het element delen dezelfde basiskleur, waardoor een naadloze overgang ontstaat. In tegenstelling tot flat design impliceert neumorfisme fysieke diepte zonder fotorealistische details.

De dubbele schaduwtechniek

De kern van neumorfisme is de dubbele box-shadow: een lichte schaduw verschoven richting de lichtbron (linksboven) en een donkere verschoven weg ervan (rechtsonder). De schaduwkleur wordt afgeleid door de achtergrondtint 10–15% lichter en donkerder te maken. Beide schaduwen gebruiken een vervagingsradius van 20–30px.

Kleurvereisten

Neumorfisme werkt alleen binnen een smal kleurbereik. De achtergrond moet een middentoon zijn en de lichte en donkere schaduwen moeten dezelfde tint delen. Dit is het CSS-patroon:

.card {
  background: #e0e5ec;
  box-shadow:
    8px 8px 20px #b8bec7,
    -8px -8px 20px #ffffff;
  border-radius: 12px;
}

Convex vs concaaf

Convexe elementen (verhoogd) gebruiken naar buiten gerichte schaduwen: licht linksboven, donker rechtsonder. Concave elementen (ingedrukt) gebruiken naar binnen gerichte schaduwen met het `inset`-sleutelwoord. Het combineren van buitenste en interne schaduwen kan een schakelaar simuleren.

Toegankelijkheidsproblemen

Het lage contrast van neumorfisme tussen element en achtergrond voldoet vaak niet aan de WCAG 2.1 AA-vereisten (minimaal 3:1 voor UI-componenten). Oplossingen: schaduwdekking verhogen, een rand gebruiken voor focustoestanden, of neumorfisme beperken tot decoratieve elementen.

Wanneer neumorfisme gebruiken

Neumorfisme werkt het best voor dashboards, klokken, audiospelers en kiosken waar merkesthetiek voorrang heeft. Vermijd het voor hoofdnavigatie en tekst-intensieve interfaces.

FAQ