2020–idag
Glassmorphism
Djup genom transparens. Struktur genom oskärpa. Gränssnittet som frostat fönster.
Principer
Transparens som djup
En solid yta döljer det bakom. En glasyta avslöjar det — oskarpt, mjukat, men närvarande. Det här skapar djup utan skugga och hierarki utan tyngd.
Varje panel på den här sidan är ett fönster. Bakgrunden blöder igenom och påminner dig om att lager existerar. Inget är opakt. Inget är isolerat.
Oskärpa som gräns
Hur separerar man förgrund från bakgrund utan en hård kant? Man gör gränsen oskarp. Den frostade glaseffekten skapar en mjuk uppdelning — närvarande men inte aggressiv.
Det här är motsatsen till Art Decos skarpa linjer. Här är gränser förslag, inte deklarationer.
Ljus och glöd
Glas fångar ljus. Det bryter, reflekterar och glöder vid kanterna. I denna stil är ramar inte linjer — de är ljusläckor. Subtila vita eller färgade ramar vid delvis opacitet simulerar hur verkligt glas fångar omgivningsljus.
Accentfärgen ligger inte platt — den strålar. Hover-tillstånd glöder. Aktiva element pulserar.
Rundat överallt
Skarpa hörn tillhör den fysiska världen — skuret glas, maskinbearbetat stål. Digitalt glas har inga tillverkningsbegränsningar. Varje hörn är rundat, varje kant är mjuk.
Radien är generös men inte extrem. Den säger tillgänglig, inte barnslig.
Varför denna stil finns
Glassmorphism har ingen ensam upphovsperson och inget grundande manifest. Den framträdde gradvis från Apples iOS 7 (2013), mognade genom Microsofts Fluent Design akrylmaterial (2017) och kristalliserades som namngiven trend runt 2020.
Stilen svarar på ett specifikt problem: hur skapar man hierarki i en flat design-värld? Flat design tog bort skuggor och djup — glassmorphism tar tillbaka dem, men genom transparens snarare än elevation.
Where it appeared
- Apples Control Center och notifieringspaneler — frostade bakgrunder som avslöjar appen under
- Microsofts Fluent Design akrylmaterial — genomskinliga navigationsytor
- Dribbble- och Behance-portfolier (2020–2022) — stilens explosion som designtrend
Legacy
Glassmorphism bevisade att flat design inte var det slutgiltiga svaret. Djup, hierarki och visuell rikedom kan samexistera med modern enkelhet.
Dess inflytande fortsätter i varje stort designsystem — Apples visionOS, Windows 11:s Mica-material och otaliga SaaS-instrumentpaneler som skiktar genomskinliga paneler över gradientbakgrunder.
Typografi i glas
Glassmorphism-typografi är ren, modern och osynlig. Typsnittet ska aldrig konkurrera med de genomskinliga ytorna — det ska kännas som text som flyter på glas.
Viktkontrast ersätter dekorativa typsnitt. En fet rubrik och en lätt brödtext skapar hierarki utan att behöva olika typsnittsfamiljer.
- En typsnittsfamilj — ett typsnitt vid flera vikter. Enkelhet är poängen.
- Vikt som hierarki — semibold rubriker, regular brödtext. Inga dekorativa typsnitt.
- Negativ spärring på rubriker — tät, modern och självsäker.
- Högt radavstånd på brödtext — luft och läsbarhet på genomskinliga bakgrunder.
Färger genom glas
Glassmorphism-färg handlar inte om ytan — den handlar om vad som syns genom ytan. Bakgrundsgradienten definierar stämningen. Glaspanelerna är alltid nästan transparenta.
Varje palett här delar samma princip: en rik, mörk eller gradientbaserad bakgrund med genomskinliga vita eller färgade överlägg.
- Mörka bakgrunder — glas behöver kontrast för att synas. Ljust-på-ljust glas försvinner.
- RGBA-ytor — aldrig helt opaka. Bakgrunden måste blöda igenom.
- En accentfärg — sparsamt använd för glödeffekter, ramar och interaktiva tillstånd.
Former
Glassmorphism har en formregel: allt är rundat. Inte aggressivt — inte pillerformat — men konsekvent mjukt. Border-radius är signaturen.
Det finns inga ornament i denna stil. Inga avdelare, inga dekorativa element. Glaspanelerna själva är dekorationen. Deras genomskinlighet, deras ramar som fångar ljus, deras skiktade djup — det är allt ornament du behöver.
Formspråket är minimalt: rektanglar med rundade hörn, staplade med lätta förskjutningar för att skapa djup. Komplexitet uppstår genom skiktning, inte genom geometri.
- Generös border-radius — 12px till 24px. Tillräckligt för att kännas mjukt, inte tillräckligt för att kännas barnsligt.
- Inget ornament — glaseffekten är ornamentet. Att tillföra dekorativa element skulle konkurrera med transparensen.
- Skiktade paneler — djup uppstår genom överlappande genomskinliga ytor, inte genom skuggor eller ramar.
- Subtila ramar — 1px vid låg opacitet. De fångar ljus som kanten av verkligt glas.
Kontrast
Glassmorphism-kontrast är skiktad och atmosfärisk. Inte Bauhaus binära svart/vitt eller Art Decos dramatiska guld-på-svart. Här skapas kontrast genom djup — förgrundspaneler mot bakgrundsgradienter, ljusa ramar mot mörka ytor.
Opakt och genomskinligt
Text är helt opak. Ytor är genomskinliga. Denna enda kontrast skapar hela illusionen — solitt innehåll som flyter på glas. Texten förankrar ögat; ytan avslöjar vad som ligger under.
Skarpt och oskarpt
Text är pixelskarp. Bakgrunder är oskärpa. Kontrasten mellan skarp förgrund och mjuk bakgrund skapar djup utan traditionell skugga eller perspektiv.
Glöd och mörker
Accentfärgen glöder — ramar vid låg opacitet, hover-tillstånd som strålar. Mot den mörka bakgrunden känns dessa glöd som ljuskällor. Kontrasten är inte mellan färger utan mellan belyst och obelyst.
Rytm
Glassmorphism-rytm är svävande och skiktad. Paneler dyker upp på olika djup och skapar en z-axelrytm som andra stilar uppnår bara på x- och y-axlarna.
Den skiktade stapeln
Paneler överlappar lätt eller sitter på olika visuella djup. Rytmen är inte vänster-till-höger eller topp-till-botten — den är nära-till-fjärran. Varje panel är ett lager i en stapel av glas.
Generöst andrum
Paneler behöver utrymme mellan sig — inte för visuell rytm utan för att bakgrunden ska synas igenom. Mellanrummen är bakgrunden. Utan dem kollapsar glasillusionen till solida block.
Konsekvent oskärpa
Varje panel har samma oskärperadie. Denna konsekvens skapar ett stadigt visuellt 'brum' — ögat lär sig att förvänta sig samma nivå av genomskinlighet och litar på systemet.
Hierarki
Glassmorphism-hierarki uppnås genom opacitet och elevation. Mer opakt = viktigare. Mer oskärpa = längre bort. Z-axeln blir det primära hierarkiska verktyget.
Helt opak text
Text är alltid 100% opak — vit eller nästan-vit på mörka bakgrunder. Det är det mest 'närvarande' elementet, närmast betraktaren. Inget konkurrerar med det.
Glaspanelen
Halvgenomskinliga ytor (5–10% vitt) skapar mellanlagret. De grupperar innehåll, definierar gränser och tillhandahåller den frostade glaseffekten. De är behållare, inte innehåll.
Bakgrunden
Det djupaste lagret — en gradient eller solid färg som syns genom glaset. Den sätter stämningen men kräver aldrig uppmärksamhet. Den är atmosfär, inte information.
Ramglöden
Subtila ramar vid 10–15% opacitet fångar ljus som verkliga glaskanter. De är det tystaste hierarkiska elementet — knappt synliga, men väsentliga för att definiera var en panel slutar och en annan börjar.
Signaturegenskaper
Glassmorphism identifieras av sin materialillusion — känslan av att du tittar genom frostat glas på en värld bakom gränssnittet.
Oskärpan
`backdrop-filter: blur()` är den tekniska grunden. Utan den är glassmorphism bara halvgenomskinliga paneler — vilket inte är samma sak. Oskärpan förvandlar transparens till material. Det är skillnaden mellan ett fönster och frostat glas.
Ramglöden
En 1px-ram vid rgba(255,255,255,0.15) — knappt synlig, men den fångar ögat som ljus på en glaskant. Denna lilla detalj är vad som skiljer glassmorphism från generisk mörkt-läge-design.
Mörka bakgrunder
Glas behöver kontrast för att synas. På en vit bakgrund försvinner genomskinliga vita paneler. Den mörka bakgrunden är inte en preferens — den är ett krav. Det är mörkret som gör glaset läsbart.
Z-axeln
De flesta stilar arbetar i två dimensioner — x (horisontellt) och y (vertikalt). Glassmorphism lägger till en tredje: z (djup). Paneler flyter på olika avstånd från betraktaren. Det här är dess unika bidrag till skärmdesignens vokabulär.
Rymd
Rymd i glassmorphism är luft mellan rutor. Mellanrummen mellan paneler är där bakgrundsgradienten syns igenom — de är inte tomma, de är det djupaste lagret gjort synligt.
Generös utfyllnad inuti paneler skapar andrum för text på genomskinliga ytor. Tät placering skulle göra oskärpan oläslig.
Ljus
Ljus i glassmorphism är inte teatralt — det är omgivande. En mjuk gradient i bakgrunden, en subtil glöd på accentfärgen och en knappt synlig radiell highlight längst upp på varje panel.
Vinjetten här är mild — precis tillräcklig för att fokusera uppmärksamhet utan att skapa dramatik. Det här är inte en scen. Det är ett fönster.
Hur denna stil går sönder
Glas är ömtåligt — och det är glassmorphism också. Små misstag krossar illusionen.
För mycket transparens
Om bakgrunden syns igenom för tydligt, slutar panelen att vara en yta och blir osynlig. Oskärpan måste vara stark nog att skapa en gräns och samtidigt förbli genomskinlig.
Ljus bakgrund utan starka ramar
Glas på ljus bakgrund behöver synliga kanter — tjockare ramar och starkare skuggor. Utan dem smälter paneler samman med bakgrunden och hierarkin kollapsar.
Skarpa hörn
Ett enda skarpt hörn bryter hela illusionen. Verkligt frostat glas har inga skarpa kanter — och det bör inte digitalt glas heller ha.
Dekorativa ornament
Glassmorphisms skönhet ligger i dess återhållsamhet. Att lägga till ikoner, avdelare eller dekorativa element på glaspaneler är som att sätta klistermärken på ett fönster — det motverkar syftet med transparensen.