CSS-neumorfisme-generator

Wat is CSS-neumorfisme-generator?

De CSS-neumorfisme-generator is een gratis visuele tool om de soft-UI-look (neumorfisme) te maken, waarbij elementen lijken uit te steken uit het oppervlak of erin te zijn gedrukt met behulp van twee verschoven schaduwen van dezelfde tint. Het is gemaakt voor UI-ontwerpers en front-endontwikkelaars die die subtiele, tastbare diepte willen zonder gepaarde box-shadow-waarden met de hand bij te stellen. Stel een basiskleur in met de kiezer of een hexveld, wissel de Vorm tussen Plat, Hol en Bol en pas de Afstand (hoe ver de schaduwen verschuiven), de Intensiteit (de sterkte van het licht-donkercontrast), de Vervaging (zachtheid) en de Radius (hoekafronding) aan. De tool leidt uit je basiskleur een lichtere highlight en een donkerdere schaduw af en combineert ze – optioneel met een subtiel verloop voor holle en bolle vormen – tot één CSS-regel, live getoond op een passende achtergrond en uitgevoerd als kopieerbare code.

CSS-neumorfisme-generator gebruiken

1. Kies de basiskleur van het oppervlak met het staal of door een hexwaarde zoals #e0e5ec in te typen.
2. Selecteer een Vorm: Plat voor een verhoogd paneel, Hol voor een ingedrukte kom of Bol voor een gewelfde bult.
3. Stel de Afstand in om de lichte en donkere schaduw verder naar buiten te schuiven voor een diepere extrusie.
4. Pas de Intensiteit aan om het highlight-/schaduwcontrast sterker of subtieler te maken.
5. Stel de Vervaging in voor zachtere of scherpere randen en de Radius om de hoeken af te ronden.
6. Controleer het live voorbeeld en kopieer dan de gegenereerde neumorfisme-CSS naar je stylesheet.

Voorbeelden

kleur #e0e5ec, vorm Plat, afstand 12, intensiteit 15, vervaging 24, radius 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

kleur #e0e5ec, vorm Hol, afstand 8, intensiteit 15, vervaging 16, radius 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

kleur #3a3f47, vorm Bol, afstand 6, intensiteit 20, vervaging 12, radius 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Veelgestelde vragen

Wat is neumorfisme?

Neumorfisme (of soft UI) is een stijl waarbij elementen lijken uit te steken uit een eenkleurig oppervlak of erin te zijn gedrukt, met twee verschoven box-shadow van dezelfde tint: een lichtere linksboven en een donkerdere rechtsonder. Deze tool leidt beide schaduwen af van je basiskleur, zodat ze altijd bij het oppervlak passen.

Wat is het verschil tussen Plat, Hol en Bol?

Plat houdt het oppervlak in één effen kleur, zodat het element boven de achtergrond uit lijkt te steken. Hol voegt een subtiel verloop toe dat naar linksboven toe donkerder wordt, waardoor het naar binnen uitgehold lijkt. Bol keert het verloop om zodat het midden gewelfd en opgetild lijkt. De lichte en donkere schaduw blijven gelijk; alleen de oppervlaktevulling verandert.

Hoe werken Afstand, Intensiteit, Vervaging en Radius?

De Afstand is de pixelverschuiving van beide schaduwen – grotere waarden duwen het element verder van het oppervlak weg. De Intensiteit bepaalt hoeveel lichter en donkerder de twee schaduwkleuren zijn dan de basiskleur. De Vervaging verzacht de schaduwranden en de Radius rondt de hoeken af. De CSS wordt live bijgewerkt zodra je een van deze waarden wijzigt.

Welke kleur moet ik voor de achtergrond gebruiken?

Neumorfisme komt alleen goed tot zijn recht als het element op een oppervlak van dezelfde basiskleur ligt – pas dezelfde kleur toe op het bovenliggende element of de pagina-achtergrond. Het voorbeeld gebruikt je basiskleur als achtergrond, zodat je het effect nauwkeurig kunt beoordelen voordat je kopieert.

Worden mijn gegevens ergens geüpload?

Nee. De generator draait volledig in je browser met JavaScript – je kleur en instellingen worden nooit naar een server verzonden, dus hij werkt privé en zelfs offline zodra de pagina is geladen.