Neumorfisme combineert vlak design en skeuomorfisme. Elementen lijken uit de achtergrond te komen door dubbele box-shadows — een lichte highlight linksboven en een donkere schaduw rechtsonder.

Hoe wordt neumorfisme gemaakt in CSS?

Twee box-shadows met tegengestelde offsets: een lichter dan de achtergrond en een donkerder. Voorbeeld: box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff.

Wat zijn de vier vormtypen?

Vlak: schaduwen buiten. Concaaf: radiaal gradiënt ingedrukt. Convex: verhoogd. Ingedrukt: schaduwen binnen met inset.

Welke achtergrondkleur werkt het best?

Middentonen werken het best. Kleuren rond #e0e5ec of #2d3436 zijn populaire startpunten.

Wanneer neumorfisme gebruiken?

Het werkt het best voor widgets, kaarten, muziekspelerbediening. Minder geschikt voor tekstzware content.

Neumorfisme Soft UI Generator

Maak zachte UI-neumorfisme-CSS-effecten met aanpasbare dubbele schaduwen en 4 vormtypes.

4 vormtypesLive voorbeeldHSL auto-calc

① Kies kleur & vorm ② Pas schaduwafstand & vervaging aan ③ Kopieer de CSS

Soft UI

Kleurvoorinstellingen:

Achtergrondkleur

light#ffffff

dark#b0bdcf

Elementgrootte (px)

150px

Randradius (px)

16px

Schaduwafstand (px)

10px

Vervagingsradius (px)

20px

Schaduwintensiteit

15%

CSS-code

.neumorphic {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow: 10px 10px 20px #b0bdcf, -10px -10px 20px #ffffff;
  /* light: #ffffff | dark: #b0bdcf */
}

Wat is Neumorfisme?

Neumorfisme (Soft UI) is een UI-designtrend die plastiek-achtige geëxtrudeerde oppervlakken creëert door vlak ontwerp en skeuomorfisme te combineren. Het gebruikt twee zorgvuldig ontworpen dubbele box-schaduwen — een lichte (highlight) en een donkere (schaduw) — met tegengestelde offsets. CSS: box-shadow: 10px 10px 20px #darkColor, -10px -10px 20px #lightColor. Voor de ingedrukte variant gebruik je het inset-sleutelwoord. De schaduwkleuren worden berekend door de HSL-helderheid met ±15–25% aan te passen.

Veelgestelde vragen

Neumorfisme combineert vlak ontwerp en skeuomorfisme. Elementen lijken uit de achtergrond te steken door dubbele box-schaduwen.

Twee box-shadows met tegengestelde offsets. Voorbeeld: box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff.

Vlak: schaduwen buiten. Concaaf: radiaal verloop ingedrukt. Convex: verheven. Ingedrukt: schaduwen binnen met inset.

Middentonen. Kleuren rond #e0e5ec of #2d3436 zijn populaire startpunten.

Heeft bekende toegankelijkheidsproblemen: laag contrast. De WCAG 2.1-eis van 3:1 wordt vaak niet gehaald.

Het beste voor dashboard-widgets, kaarten, muziekspeler-bedieningselementen.

Bereken de HSL-helderheid, maak een lichtere (+15-25%) en donkerdere (-15-25%) versie. Deze tool berekent automatisch.

Wat is Neumorfisme?

Veelgestelde vragen

Ontdek ons netwerk