Glassmorphism og gradienter: en praktisk guide

Glassmorphism er en designstil bygget av frostet glass: gjennomskinnelige paneler som gjør det som ligger bak uskarpt, lagt over en fargerik bakgrunn, som regel en gradient. Panelet beholder et hint av fargen under, en tynn lys kant fanger lyset, og hele grensesnittet føles lagdelt og fysisk. Operativsystemer har brukt gjennomskinnelige materialer i årevis, og i 2025 gjorde Apple glass til kjernen i sitt nye designspråk Liquid Glass, så uttrykket forsvinner ikke. Brukt uten omtanke gir det likevel grå bokser og uleselig tekst.

Hvorfor glassmorphism trenger en gradient

Frostet glass ser bare ut som glass når det er noe fargerikt bak som kan gjøres uskarpt. Over en flat hvit eller grå bakgrunn er et glasspanel bare en litt annen gråtone. Over en rik gradient, med fargefelt på ulike steder, plukker panelet opp myk farge som skifter fra den ene kanten til den andre, og det skiftet er det øyet leser som glass. Gradienten er altså ikke pynt: den er halve effekten.

De beste glassbakgrunnene har sterke, adskilte fargeområder og en mørk eller dyp bunn, omtrent som mesh-gradienter eller aurora-gradienter. Plasser det lyseste feltet slik at det ligger delvis bak et panel; panelet gløder der de overlapper.

CSS-en bak glassmorphism

Kjernen i effekten er backdrop-filter, som legger et filter på alt bak et element i stedet for på selve elementet. Kombiner det med et halvgjennomsiktig fyll, en tynn gjennomskinnelig kant og en myk skygge. Gjeldende versjoner av de store nettleserne støtter det, og eldre Safari-versjoner trenger prefikset -webkit-; se MDN om backdrop-filter og caniuse.

.glass {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
  color: #ffffff;
}

/* Without backdrop-filter, use a solid, readable panel instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(15 23 42 / 0.88); }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(15 23 42 / 0.92); }
}

Glassmorphism og kontrast

Det største problemet med glass er at teksten ligger på det som til enhver tid er bak panelet. En overskrift som leses godt over et mørkt indigofelt, kan forsvinne når panelet ruller over en blek rosa glød. Kontrasten må holde i verste fall, ikke bare i skissen din. WCAG krever 4,5:1 for brødtekst; sjekk det på det lyseste punktet som noen gang kan havne bak ordene.

Et pålitelig triks er å tone glasset mot den mørkeste fargen i bakgrunnen i stedet for å bruke hvitt. Et mørkt indigoglass på 50 % over en gradient i indigo og rosa holder hvit tekst leselig overalt, og lar likevel fargen skinne gjennom. Flere måter å holde ordene tydelige på finner du i tekst på en gradient.

Når glassmorphism hjelper, og når det ikke gjør det

• Hjelper: svevende navigasjon, dialoger, mediekontroller, kort over en hero og widgeter i låseskjermstil, der laget skal føles som om det ligger over innholdet
• Hjelper: produkt- og lanseringssider der gradienten er merkevaren og glasset viser den fram
• Skader: skjemaer, tabeller og lang lesing, der folk trenger rolig, konstant kontrast
• Skader: sider med mange stablede glasslag, som ser grumsete ut og koster ytelse
• Skader: overalt der bakgrunnen er flat eller travel med bilder og liten tekst

Slik designer du et glassgrensesnitt

1. 1

   Design bakgrunnen først

   Velg en gradient med adskilte fargefelt på en dyp bunn. Glasset blir aldri bedre enn det som ligger bak.

2. 2

   Begrens glasset til ett eller to lag

   Navigasjon og ett nivå med kort er mer enn nok. Glass på glass på glass blir grått.

3. 3

   Gjør det uskarpt nok til å løse opp detaljer

   Hvis du fortsatt kan skimte former bak panelet, øker du uskarpheten før du gjør noe annet.

4. 4

   Ton for kontrast

   Velg den fyllfargen og opasiteten som holder teksten leselig over den lyseste delen av bakgrunnen.

5. 5

   Legg til en lys kant og en myk skygge

   En gjennomskinnelig kant på 1 px og en bred, svak skygge får panelet til å se ut som en fysisk plate.

6. 6

   Test ytelsen på en telefon

   Uskarp bakgrunn er dyr å tegne. Hold de uskarpe områdene moderate, og unngå å animere dem på store flater.

Glass er ett av flere materialer en gradient kan bære; gradienttekstur sammenligner det med korn, papir og silke. Vil du ha en bakgrunn som allerede har fargefeltene, dybden og lyset glass trenger, er mange Marks på Markedet bygget slik, og du kan designe med hvilken som helst av dem gratis.