Glassmorphism og gradienter: en praktisk guide

Glassmorphism er en designstil bygget på mat glas: halvgennemsigtige paneler, der slører alt bag dem, lagt over en farverig baggrund, typisk en gradient. Panelet bevarer et strejf af farven nedenunder, en tynd lys kant fanger lyset, og hele grænsefladen føles lagdelt og fysisk. Styresystemer har brugt gennemskinnelige materialer i årevis, og i 2025 gjorde Apple glas til centrum i sit nye designsprog Liquid Glass, så udtrykket forsvinder ikke. Uforsigtig brug giver dog grå bokse og ulæselig tekst.

Derfor har glassmorphism brug for en gradient

Mat glas ligner kun glas, når der er noget farverigt bagved at sløre. Over en ensfarvet hvid eller grå baggrund er et glaspanel bare en lidt anden gråtone. Over en rig gradient med farvefelter forskellige steder optager panelet bløde farver, der skifter fra kant til kant, og øjet læser netop det skift som glas. Gradienten er derfor ikke pynt. Den er halvdelen af effekten.

De bedste glasbaggrunde har kraftige, adskilte farveområder og en mørk eller dyb bund ligesom mesh-gradienter eller aurora-gradienter. Placér det lyseste felt delvist bag et panel. Panelet gløder dér, hvor de overlapper.

CSS bag glassmorphism

Kernen i effekten er backdrop-filter, som lægger et filter på alt bag et element frem for på selve elementet. Kombinér det med halvgennemsigtigt fyld, en tynd gennemskinnelig kant og en blød skygge. Aktuelle versioner af de store browsere understøtter det, og ældre Safari-versioner kræver præfikset -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 problem med glas er, at teksten ligger oven på det, der er bag panelet. En overskrift, der er tydelig over mørk indigo, kan forsvinde, når panelet ruller over en lys lyserød glød. Kontrasten skal holde i værste fald, ikke kun i din mockup. WCAG kræver 4.5:1 til brødtekst. Tjek ved det lyseste punkt, der kan komme bag ordene.

Et pålideligt greb er at tone glasset mod baggrundens mørkeste farve frem for at bruge hvid. Mørkt indigoglas med 50% opacitet over en gradient i indigo og lyserød holder hvid tekst læsbar overalt, mens farverne stadig skinner igennem. Se tekst på en gradient for flere måder at holde ordene tydelige på.

Hvornår glassmorphism hjælper, og hvornår det ikke gør

• Hjælper: svævende navigation, dialoger, mediekontroller, kort over et heroafsnit og widgets som på en låseskærm, hvor laget skal føles hævet over indholdet
• Hjælper: produkt- og lanceringssider, hvor gradienten er brandet, og glasset fremhæver den
• Skader: formularer, tabeller og lange tekster, hvor folk har brug for rolig, konstant kontrast
• Skader: sider med mange glaslag oven på hinanden, som bliver mudrede og koster ydeevne
• Skader: steder, hvor baggrunden er ensfarvet eller urolig med fotos og lille tekst

Sådan designer du en glasgrænseflade

1. 1

   Design baggrunden først

   Vælg en gradient med adskilte farvefelter på en dyb bund. Glasset bliver kun så godt som det, der ligger bag det.

2. 2

   Begræns glas til et eller to lag

   Navigation og ét lag kort er rigeligt. Glas på glas på glas bliver gråt.

3. 3

   Slør nok til at opløse detaljer

   Hvis du stadig kan se former bag panelet, så øg sløringen først.

4. 4

   Ton for kontrast

   Vælg fyldfarve og opacitet, der holder teksten læsbar over baggrundens lyseste område.

5. 5

   Tilføj en lys kant og en blød skygge

   En gennemskinnelig kant på 1 px og en bred, svag skygge får panelet til at ligne en fysisk plade.

6. 6

   Test ydeevnen på en telefon

   Baggrundssløring er krævende at tegne. Hold de slørede områder begrænsede, og undgå at animere dem over store flader.

Glas er et af flere materialer, en gradient kan bruge. Gradienttekstur sammenligner det med korn, papir og silke. Vil du have en baggrund, der allerede rummer de farvefelter, den dybde og det lys, glas kræver, er mange Marks på Markedet bygget sådan, og du kan designe med dem alle gratis.