Neumorfisme is de look waarbij een knop of kaart uit de pagina zelf lijkt te worden gedrukt, als een vorm gegoten uit zacht plastic Er is geen rand, geen vulkleur die verschilt van de achtergrond, alleen een bleke highlight aan de ene kant en een zachte schaduw aan de andere kant Het fotografeert prachtig in design mockups In een echte interface is het gemakkelijk om op twee manieren fout te gaan: het effect verdwijnt, of de besturing wordt moeilijk te zien.
Beide problemen komen neer op een kleine hoeveelheid rekenkunde over kleuren en schaduwen Deze gids legt uit hoe het zachte UI-effect uit twee wordt opgebouwd box-shadow lagen, hoe de lichte en donkere tinten zijn afgeleid van één oppervlaktekleur, wat de vlakke, concave, convexe en geperste vormen veranderen, en hoe een neumorf grensvlak bruikbaar te houden onder de WCAG contrastregels De CSS-generator voor neomorfisme produceert alle onderstaande code met een live preview.
tl;dr: Een neumorf element heeft dezelfde achtergrondkleur als de pagina en twee box-shadows: een donkerdere offset naar beneden en rechts, en een lichtere offset naar boven en links Door het instel-trefwoord op beide te gebruiken, ziet het element er ingedrukt uit De CSS Neumorphism Generator leidt beide schaduwkleuren af van uw oppervlaktekleur, met schuifregelaars voor afstand (2 tot 50 px), vervaging (0 tot 100 px), intensiteit (2 tot 40%) en straal (0 tot 80 px), plus platte, concave, convexe en geperste vormen Het standaard lichtoppervlak geeft
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. Die schaduwen bereiken slechts ongeveer 1,5:1 contrast tegen het oppervlak, ruim onder de 3:1 waar WCAG om vraagt op controlegrenzen, dus interactieve elementen hebben een zichtbare rand of focusstatus nodig. Het is client-side, gratis, geen aanmelding.
Wat is neuporfisme in UI-ontwerp?
Neumorfisme, ook wel zachte UI genoemd, is een visuele stijl waarbij interface-elementen geëxtrudeerd lijken van of in hun achtergrond gedrukt worden met behulp van gepaarde lichte en donkere schaduwen in plaats van randen of contrasterende vullingen De naam mengt & quot;new" en "skeuomorphism", de oudere stijl die fysieke materialen imiteerde Neumorphism imiteert één materiaal, een enkel doorlopend oppervlak, en vertrouwt op een ingebeelde lichtbron linksboven.
De stijl werd rond 2020 populair op designshowcasesites. Het is zeer geschikt voor decoratieve panelen, dashboards die op goede schermen worden bekeken en eenmalige heldengraphics. Het is slecht geschikt voor dichte vormen, alles wat buitenshuis wordt gebruikt en elke controle die een gebruiker snel moet vinden, om redenen die in het toegankelijkheidsgedeelte worden behandeld.
Hoe werkt het neumorfe effect in CSS?
Het effect heeft drie dingen nodig: een achtergrondkleur op het element dat overeenkomt met de pagina, een randradius en twee schaduwen die in tegengestelde richtingen worden geworpen De CSS box-shadow property accepteert een door komma's gescheiden lijst van schaduwen, elk met een x offset, een y offset, een vervagingsstraal en een kleur, zoals gedocumenteerd op MDN's box-shadow-referentie en gespecificeerd in CSS Achtergronden en Grenzen Niveau 3.
Hier is de uitvoer van de generator's standaard Light-voorinstelling:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
Lees de schaduwlijst van links naar rechts De eerste schaduw is 12 pixels naar rechts en 12 naar beneden verschoven, wazig over 24 pixels, in een grijs donkerder dan het oppervlak: dat is de tint aan de kant weg van het licht De tweede is 12 pixels naar links en 12 naar boven verschoven in een kleur lichter dan het oppervlak: het hoogtepunt aan de kant die naar het licht is gericht Omdat het element' de eigen achtergrond hetzelfde is #e0e0e0 als pagina is er geen zichtbare rand. De vorm bestaat alleen als de grens waar de twee schaduwen samenkomen.
Waarom komt mijn neomorfisme-effect niet naar voren?
De meest voorkomende oorzaak is een mismatch tussen het element' s achtergrond en wat er ook achter zit Als de pagina wit is en de kaart is #e0e0e0, zie je een grijze kaart met een schaduw, niet een zachte extrusie Zet de parent' s achtergrond op dezelfde kleur als het element De generator' s preview paneel doet dit automatisch, daarom ziet het er goed en fout uit wanneer geplakt op een witte pagina.
De tweede oorzaak is een highlightkleur die niet te zien is Op een zeer licht oppervlak kan de & quot;light" schaduw al zuiver wit zijn, en op een zuiver witte bladzijde is een witte schaduw onzichtbaar, ook daarom wordt neumorfisme bijna nooit gedaan op #ffffff.
Hoe worden de lichte en donkere schaduwkleuren berekend?
De generator verschuift elk rood, groen en blauw kanaal van de oppervlaktekleur met dezelfde hoeveelheid: het intensiteitspercentage van 255. de lichte tint voegt die hoeveelheid toe en de donkere tint trekt het af, en elk kanaal wordt vastgeklemd aan het bereik van 0 tot 255 en afgerond.
Hier is de berekening voor de standaard Light-voorinstelling, oppervlakte #e0e0e0 (224, 224, 224) bij een intensiteit van 15%:
- Shiftbedrag: 15% van 255 = 38,25.
- Donkere tint: 224 - 38,25 = 185,75, afgerond op 186, wat zeskant is
ba. Resultaat:#bababa. - Lichte tint: 224 + 38,25 = 262,25, vastgeklemd op 255, zeskant
ff. Resultaat:#ffffff.
Stap 3 toont een grens die het weten waard is Aan #e0e0e0 het hoogtepunt raakt zuiver wit zodra de intensiteit voorbij is (255 - 224) /255 = 12,2% Elke intensiteit daarboven maakt de schaduw donkerder zonder het hoogtepunt helderder te maken, dus het effect wordt scheef. Op lichte oppervlakken houd je de intensiteit dichtbij dat klempunt, of kies een iets donkerder oppervlak zodat het hoogtepunt ruimte heeft.
Dezelfde regel geeft de andere presets
| Voorinstelling | Surface | Afstand / vervaging | Intensiteit | Donkere schaduw | Lichte schaduw |
|---|---|---|---|---|---|
| Light | #e0e0e0 |
12 / 24 px | 15% | #bababa |
#ffffff |
| Card | #f0f0f3 |
10 / 20 px | 12% | #d1d1d4 |
#ffffff |
| Dark | #2d2f34 |
12 / 24 px | 12% | #0e1015 |
#4c4e53 |
| Gedrukt | #e0e0e0 |
12 / 24 px | 15% | #bababa |
#ffffff |
| Convex | #e0e0e0 |
12 / 24 px | 15% | #bababa |
#ffffff |
Op de Dark-voorinstelling geeft het aftrekken van 30,6 van elk kanaal van (45, 47, 52) (14, 16, 21), of #0e1015, en het toevoegen ervan geeft (76, 78, 83), of #4c4e53. Omdat de verschuiving over de kanalen heen gelijk is, draagt de lichte blauwe tint van het oppervlak beide tinten over, waardoor een donkere neumorfe kaart niet verandert in vlak neutraal grijs.
Wat veranderen de vier vormen?
Vorm regelt het element' s achtergrond vulling en of de schaduwen zitten buiten of binnen het Afstand, onscherpte en straal gedragen zich hetzelfde voor alle vier.
| Shape | achtergrond | Shadows | lijkt op |
|---|---|---|---|
| Flat | Vaste oppervlaktekleur | Outer | Een verhoogd plateau |
| Convex | linear-gradient(145deg, light, dark) |
Outer | Een verhoogde koepel, verlicht van linksboven |
| Concave | linear-gradient(145deg, dark, light) |
Outer | Een verhoogde schotel die naar binnen buigt |
| Gedrukt | Vaste oppervlaktekleur | allebei inset |
Een holte in de pagina geduwd |
De Pressed preset levert
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
Met inset, de schaduwen worden getekend binnen het element' s opvuldoos, zodat de donkere tint verschijnt langs de linkerboven binnenrand en het hoogtepunt langs de rechteronderzijde Dat keert de lichtkeu om en leest als een depressie Het is de natuurlijke & quot;active" of & quot;on" staat voor een tuimelaar waarvan de rusttoestand vlak is.
De Convex-voorinstelling gebruikt de volledige lichte en donkere tinten als de gradiënt stopt linear-gradient(145deg, #ffffff, #bababa), wat een vrij sterke curve is met een intensiteit van 15%. Voor een subtielere koepel verlaagt u de intensiteit; dat verzacht de gradiënt en de schaduwen samen, aangezien beide uit dezelfde twee kleuren komen.
Hoe werken afstand, vervaging en straal op elkaar in?
De schuifregelaars zijn onafhankelijk, maar het uiterlijk hangt af van hun verhoudingen.
- Afstand (2 tot 50 px) stelt in hoe ver elke schaduw op beide assen verschoven is, Het regelt de schijnbare hoogte: grotere afstanden zorgen ervoor dat het element hoger boven de pagina zweeft.
- Vervagen (0 tot 100 px) stelt in hoe zacht de schaduwranden zijn Een vervaging rond twee keer de afstand, zoals in elke preset, geeft de karakteristieke kussenachtige look Blur gelijk aan of onder de afstand produceert harde schaduwen die meer op een uitsparing lijken.
- Radius (0 tot 80 px) rondt de hoeken af Zachte UI gebruikt bijna altijd royale afronding; vierkante hoeken met zachte schaduwen zien eruit als een renderfout.
- Intensiteit (2 tot 40%) stelt in hoe ver de tinten van de oppervlaktekleur bewegen.
Een praktische startverhouding is blur = 2 x afstand, radius = 2 x afstand, intensiteit nabij het klempunt voor uw oppervlak Voor kleine elementen zoals een 40-pixel icoonknop, schaalafstand tot 4 tot 6 pixels; een 12-pixel offset op een 40-pixel knop maakt de schaduw groter dan de besturing.
Is neumorfisme toegankelijk?
Standaard niet Een neumorfe besturing's rand wordt gedefinieerd door schaduwen die slechts een paar procent van het oppervlak verschillen in luminantie, en die niet voldoen aan de WCAG-vereiste voor de zichtbare grens van interactieve componenten.
WCAG 2.2 Succescriterium 1.4.11, Niet-tekstcontrast, vereist dat de visuele informatie die nodig is om een gebruikersinterfacecomponent te identificeren, en de toestanden ervan, een contrastverhouding hebben van ten minste 3:1 ten opzichte van aangrenzende kleuren. De contrastverhouding maakt gebruik van de relatieve luminantieformule gedefinieerd in WCAG 2.2. Doorwerken voor de standaardvoorinstelling:
| Pair | Relatieve luminantie | Contrastverhouding | Voldoet aan 3:1? |
|---|---|---|---|
Donkere schaduw #bababa vs oppervlak #e0e0e0 |
0,491 versus 0,745 | Ongeveer 1,47:1 | heel weinig |
Lichte schaduw #ffffff vs oppervlak #e0e0e0 |
1.000 versus 0,745 | Ongeveer 1,32:1 | heel weinig |
Border #7f7f7f vs oppervlak #e0e0e0 |
0,212 versus 0,745 | Ongeveer 3,03:1 | Gewoon |
Border #767676 vs oppervlak #e0e0e0 |
0,181 versus 0,745 | Ongeveer 3,44:1 | Ja, met marge |
Tekst #333333 vs oppervlak #e0e0e0 |
0,033 versus 0,745 | Ongeveer 9,6:1 | Ja (gaat ook 4,5:1 door voor tekst) |
En die schaduwfiguren zijn het beste geval De onscherpte verspreidt de schaduwkleur naar buiten, dus het grootste deel van de zichtbare schaduw is lichter dan #bababa. Het verhogen van de intensiteit helpt niet veel op een licht oppervlak, omdat het hoogtepunt al op wit is geklemd.
Om je eigen kleuren te controleren, is de kleurcontrastcontrole berekent de verhouding voor elk paar, en de gids voor kleurcontrastcontrole legt de formule in detail uit.
Hoe de look te behouden en de contrastregels te passeren
Je hoeft de stijl niet te verlaten Je moet er niet meer op vertrouwen voor alles wat een gebruiker moet waarnemen.
- Gebruik zachte gebruikersinterface voor containers, niet voor bedieningselementen. Kaarten, panelen en decoratieve putten kunnen puur neumorf zijn Criterium 1.4.11 gaat over interactieve componenten en betekenisvolle afbeeldingen, dus een container waarvan de inhoud zichzelf identificeert, brengt veel minder risico met zich mee dan een knop waarvan de rand het enige teken is dat hij bestaat.
- Geef elk interactief element een echt signaal. Een rand van 1 of 2 pixels in een kleur van 3:1 of beter, een contrasterend pictogram of een tekstlabel.
- Maak focus duidelijk. Voeg een
:focus-visibleomtrek in een contrastrijke kleur Zachte schaduwen zijn geen focusindicator. - Geef de toestand niet alleen met diepte aan. Indien ingedrukt betekent "on", wijzig ook een pictogram, een label of een kleur.
- Respecteer gebruikersinstellingen. de voorkeur-contrast media query hiermee kunt u randen toevoegen of het effect laten vallen wanneer een gebruiker om meer contrast vraagt.
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
Hoe te genereren neumorfisme CSS, stap voor stap
- Open de neumorfismegenerator en kies een voorinstelling als uitgangspunt: Licht, Kaart, Donker, Gedrukt of Convex.
- Stel de oppervlaktekleur in met de kleurenkiezer, zodat deze overeenkomt met de achtergrond waarop uw element zal zitten.
- Pas afstand en onscherpte aan voor hoogte en zachtheid, dan intensiteit voor contrast, kijkend naar de live preview.
- Kies een vorm: plat, hol, bol of geperst.
- Stel de straal in op de elementgrootte.
- Klik op CSS kopiëren en plak de drie declaraties in uw regel Vergeet niet om de ouder dezelfde achtergrondkleur te geven.
Hoe ondersteun je lichte en donkere thema's?
Genereer één set waarden voor elk thema en verwissel deze met aangepaste eigenschappen De bovenstaande Light en Dark presets geven een werkend paar:
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
Donker neumorfisme heeft de spiegel van het licht-oppervlak probleem: de schaduw klemt zich naar zwart, en het hoogtepunt draagt het effect Contrast voor elk thema afzonderlijk controleren.
Neumorfisme, glasmorfisme en effen schaduwen vergeleken
Zachte gebruikersinterface is een van de vele manieren om diepte aan te tonen, en elk heeft verschillende kosten.
| Stijl | Kern CSS | Dieptekeu | Contrastrisico | goed voor |
|---|---|---|---|---|
| Neumorfisme | Twee tegen box-shadow lagen, bijpassende achtergrond |
Extrusie van de pagina | High | Decoratieve panelen, dashboards showcase |
| Glasmorfisme | backdrop-filter: blur() en een doorschijnende vulling |
Berijpte laag over inhoud | Medium, hangt af van wat er achter zit | Overlays, kaarten over beelden |
| Materiaalstijlverhoging | Een of twee naar beneden box-shadow lagen |
Kaart die boven de pagina zweeft | Laag | Algemene interfaces |
| Plat met randen | border en kleuren vullen |
niet een | Laagste | Formulieren, dichte data, toegankelijkheid-eerst werk |
de glassmorfismegenerator bouwt de matglasstijl, en de gids voor schaduwgeneratoren voor dozen dekt enkelvoudige en gelaagde hoogteschaduwen Voor gloeiende of reliëftekst in plaats van vakken, de tekstschaduwgenerator past een soortgelijk idee toe op het type Ze staan allemaal vermeld op de CSS tools hub.
Is de generator privé?
Ja. de preview en CSS worden gegenereerd in uw browser met JavaScript, niets wordt geüpload of opgeslagen, en de pagina blijft offline werken zodra deze is geladen Het kopiëren van de CSS telt mee voor een dagelijkse gebruikslimiet, en er verschijnt een bericht als die limiet wordt bereikt.
