# Glassmorphism og gradienter: en praktisk guide

[Canonical HTML page](https://gradiently.design/nb/guide/glassmorphism)

Frostet glass over en glødende gradient er en av de vakreste effektene i grensesnittdesign, og en av de letteste å gjøre uleselig. Slik får du skjønnheten og beholder ordene.

## The short version

- Glassmorphism er en grensesnittstil som bruker gjennomskinnelige, uskarpe paneler, som frostet glass, lagt over fargerike bakgrunner.
- Effekten avhenger av bakgrunnen: frostet glass over en flat farge ser ut som en grå boks, mens glass over en rik gradient gløder.
- Hovedproblemet er kontrast, fordi tekst på glass ligger på den fargen som er bak, og den kan endre seg når siden rulles.
- I CSS bygges glassmorphism med backdrop-filter blur, et halvgjennomsiktig fyll, en tynn lys kant og en reserveløsning for nettlesere uten støtte.
- Glass fungerer best for noen få svevende lag, som navigasjon, kort og dialoger, ikke for hver eneste flate på en side.

**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.

- Fiolett mot cyan: `radial-gradient(circle at 20% 25%, #8b5cf6 0%, #4c1d95 25%, #0e7490 55%, #0f172a 90%)`
- Rosa glød på indigo: `radial-gradient(circle at 75% 20%, #f472b6 0%, #7c3aed 35%, #1e1b4b 75%)`
- Solnedgang under glass: `radial-gradient(ellipse at 30% 80%, #fb923c 0%, #db2777 35%, #3b0764 80%)`

Bakgrunner som gir glasset noe å fange: tydelige fargefelt i stedet for en jevn, glatt overgang.

De beste glassbakgrunnene har sterke, adskilte fargeområder og en mørk eller dyp bunn, omtrent som [mesh-gradienter](https://gradiently.design/nb/guide/mesh-gradients) eller [aurora-gradienter](https://gradiently.design/nb/guide/aurora-gradients). 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](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) og [caniuse](https://caniuse.com/css-backdrop-filter).

```css
.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); }
}
```

Et frostet panel med reserveløsning. `saturate()` holder den uskarpe fargen levende i stedet for utvasket.

| Egenskap | Startverdi | Hva den styrer |
| --- | --- | --- |
| Uskarphet | 16 til 30 px | Hvor mye bakgrunnen løses opp. For lite, og detaljer skinner gjennom teksten |
| Fyllets opasitet | 10 til 25 % hvitt, eller 40 til 70 % mørkt | Hvor mye panelet skiller seg fra bakgrunnen |
| Metning | 120 til 160 % | Holder uskarp farge livlig i stedet for grå |
| Kant | 1 px med 15 til 30 % hvitt | Den lyse kanten som selger glasset |
| Skygge | Stor, myk, lav opasitet | Løfter panelet opp fra bakgrunnen |

Utgangspunkter du justerer etter øyemål. Kraftigere uskarphet og sterkere fyll er alltid tryggere for tekst.

## 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.

### Uleselig glass

- Svak uskarphet, så former bak skinner gjennom bokstavene
- Svært gjennomsiktig fyll over en lys bakgrunn
- Tynn, lett tekst i hvitt
- Glasspaneler som ruller over innhold i endring

### Leselig glass

- Uskarphet på 16 px eller mer, så bakgrunnen løses opp
- Et tonet fyll som er sterkt nok til å garantere kontrast
- Medium eller fet vekt for tekst på glass
- Glass festet over en kjent, kontrollert bakgrunn

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](https://gradiently.design/nb/guide/text-on-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. **Design bakgrunnen først** Velg en gradient med adskilte fargefelt på en dyp bunn. Glasset blir aldri bedre enn det som ligger bak.
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. **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. **Ton for kontrast** Velg den fyllfargen og opasiteten som holder teksten leselig over den lyseste delen av bakgrunnen.
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. **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](https://gradiently.design/nb/guide/gradient-texture) 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.

## FAQ

### Hva er glassmorphism?

Glassmorphism er en designstil som bruker gjennomskinnelige paneler i frostet glass med uskarp bakgrunn, en lys kant og en myk skygge, lagt over fargerike gradienter.

### Hvordan lager jeg en glasseffekt i CSS?

Bruk `backdrop-filter: blur()` med en halvgjennomsiktig bakgrunnsfarge, en tynn gjennomskinnelig kant og en myk skygge, pluss prefikset `-webkit-` for eldre Safari.

### Er glassmorphism tilgjengelig?

Det kan det være, hvis uskarpheten er sterk, fyllet er tonet nok til å holde teksten på 4,5:1 i kontrast over den lyseste bakgrunnen, og det finnes en solid reserveløsning.

### Hvorfor ser glasspanelet mitt grått ut?

Bakgrunnen bak det er for flat. Glass trenger sterke, adskilte fargeområder bak seg for å ha noe å plukke opp.

### Går backdrop-filter ut over ytelsen?

Det koster mer enn en vanlig bakgrunn, særlig over store flater eller under animasjon. Bruk det på noen få paneler og test på telefoner.