Glassmorphism vs Neomorphism

Vilket problem löser de båda?

Efter att flat design tagit bort alla djupledtrådar (2013–2019), föreslog både Glassmorphism och Neomorphism: tänk om vi tar tillbaka djup — men subtilt?

Båda förkastar hårda drop shadows (Material Design) och båda förkastar ren planhet. Men deras lösningar är motsatser i utförande.

Hur skapar de djup på olika sätt?

Glassmorphism: djup genom transparens. Ytan är genomskinlig — du ser oskarpt innehåll bakom den. Djup bevisas genom att ett lager visuellt sitter framför ett annat.

Neomorphism: djup genom extrudering. Ytan har samma färg som sin bakgrund — upphöjd eller intryckt av motstående skuggor. Djup käns genom ljus, inte genom skiktning.

Glassmorphism är glas på glas. Neomorphism är lera pressad ur lera.

Hur skiljer sig deras paletter?

Glassmorphism: mörk bakgrund (#1a1a2e) med genomskinliga ytor (rgba vitt vid 8%). Mörkret är väsentligt — transparens behöver kontrast för att synas.

Neomorphism: enhetlig ljus bakgrund (#e0e5ec) för allt. Bakgrund och yta har samma färg. Bara skugga skapar separation.

Glassmorphism är i grunden mörkt-läge. Neomorphism är i grunden ljust-läge. Att byta för någondera bryter illusionen.

Hur hanterar de ramar?

Glassmorphism: subtila ljusa ramar (rgba vitt vid 15%) simulerar kanten av glas som fångar ljus. Ramen är en reflektion, inte en struktur.

Neomorphism: inga ramar alls (border-width: 0px). En ram skulle bryta illusionen av 'ett enda material'. Separation uppstår enbart genom skugga.

Det här är den tydligaste diagnostiken: om den har genomskinliga ramar → Glassmorphism. Om den saknar ramar → Neomorphism.

Vilken är mer tillgänglig?

Glassmorphism (med omsorg): text på mörka genomskinliga ytor kan vara läsbar om bakgrundsopaciteten är tillräcklig och oskärpan stark. Vår implementation använder 65% opacitet + 16px oskärpa.

Neomorphism (problematisk): sammanfärgade ytor med bara skugga som separation skapar i grunden låg kontrast. Text/bakgrundsförhållandet är 5.9:1 — knappt ovanför WCAG AA-minimum.

Glassmorphism är lättare att göra tillgängligt. Neomorphisms grundläggande premiss (samma färg överallt) strider mot kontrastkrav.

Vilken bör du välja?

Välj Glassmorphism när: du har skiktat innehåll (kort över kartor, paneler över instrumentpaneler), gränssnittet gynnas av att kontext syns igenom, och du kan garantera en mörk eller färgstark bakgrund.

Välj Neomorphism när: gränssnittet är enkelt (få element, minimal text), den taktila kvaliteten spelar roll (fysiska kontroller, musikspelare och miniräknare), och du kan acceptera tillgänglighetsavvägningarna.

Ingetdera är en bra standard för textintensivt innehåll. Båda fungerar bäst för interaktiva komponenter snarare än läsupplevelser.