# Glassmorphism och gradienter: en praktisk guide

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

Frostat glas över en glödande gradient är en av de vackraste effekterna i gränssnittsdesign, och en av de lättaste att göra oläslig. Så får du skönheten och behåller orden.

## The short version

- Glassmorphism är en gränssnittsstil som använder genomskinliga, suddiga paneler, som frostat glas, lagda över färgstarka bakgrunder.
- Effekten beror på bakgrunden: frostat glas över en platt färg ser ut som en grå ruta, medan glas över en rik gradient glöder.
- Det största problemet är kontrasten, eftersom text på glas ligger på vilken färg som helst bakom, vilket kan ändras medan sidan scrollas.
- I CSS byggs glassmorphism med backdrop-filter blur, en halvgenomskinlig fyllning, en tunn ljus kant och en reserv för webbläsare utan stöd.
- Glas fungerar bäst för ett fåtal flytande lager, som navigering, kort och dialogrutor, inte för varje yta på en sida.

**Glassmorphism** är en designstil byggd på frostat glas: genomskinliga paneler som suddar ut det som ligger bakom dem, lagda över en färgstark bakgrund, oftast en gradient. Panelen behåller en antydan av färgen under, en tunn ljus kant fångar ljuset och hela gränssnittet känns lagerindelat och fysiskt. Operativsystem har använt genomskinliga material i många år, och 2025 gjorde Apple glas till kärnan i sitt nya designspråk Liquid Glass, så looken försvinner inte. Används den slarvigt blir det dock grå rutor och oläslig text.

## Därför behöver glassmorphism en gradient

Frostat glas ser bara ut som glas när det finns något färgstarkt bakom att sudda ut. Över en platt vit eller grå bakgrund är en glaspanel bara en något annorlunda grå. Över en rik gradient, med fläckar av färg på olika ställen, fångar panelen mjuk färg som skiftar från ena kanten till den andra, och det skiftet är vad ögat läser som glas. Gradienten är alltså ingen dekoration: den är halva effekten.

- Violett som går över i 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%)`
- Solnedgång under glas: `radial-gradient(ellipse at 30% 80%, #fb923c 0%, #db2777 35%, #3b0764 80%)`

Bakgrunder som ger glaset något att fånga: tydliga fläckar av färg snarare än en jämn, mjuk blandning.

De bästa glasbakgrunderna har starka, åtskilda färgytor och en mörk eller djup bas, ungefär som [meshgradienter](https://gradiently.design/sv/guide/mesh-gradients) eller [norrskensgradienter](https://gradiently.design/sv/guide/aurora-gradients). Placera den ljusaste fläcken så att den delvis ligger bakom en panel; panelen glöder där de överlappar.

## CSS:en bakom glassmorphism

Effektens kärna är `backdrop-filter`, som tillämpar ett filter på allt bakom ett element i stället för på själva elementet. Kombinera det med en halvgenomskinlig fyllning, en tunn genomskinlig kant och en mjuk skugga. Aktuella versioner av de stora webbläsarna stöder det, och äldre Safari-versioner behöver prefixet `-webkit-`; se [MDN om backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) och [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); }
}
```

En frostad panel med reserv. `saturate()` håller den suddiga färgen livlig i stället för urblekt.

| Egenskap | Utgångsvärde | Vad den styr |
| --- | --- | --- |
| Blur | 16 till 30 px | Hur mycket bakgrunden löses upp. För lite och detaljer syns genom texten |
| Fyllningens opacitet | 10 till 25 % vitt, eller 40 till 70 % mörkt | Hur mycket panelen skiljer sig från bakgrunden |
| Saturate | 120 till 160 % | Håller den suddiga färgen livlig i stället för grå |
| Kant | 1 px i 15 till 30 % vitt | Den ljusa kanten som säljer glaset |
| Skugga | Stor, mjuk, låg opacitet | Lyfter panelen från bakgrunden |

Utgångspunkter att trimma på känn. Kraftigare blur och starkare fyllning är alltid säkrare för text.

## Glassmorphism och kontrast

Det största problemet med glas är att texten ligger på det som finns bakom panelen. En rubrik som går att läsa över ett mörkt indigoområde kan försvinna när panelen scrollar över en blek rosa glöd. Kontrasten måste hålla i värsta fall, inte i det som finns i din skiss. WCAG kräver 4,5:1 för brödtext; kontrollera det vid den ljusaste punkt som någonsin kan ligga bakom orden.

### Oläsligt glas

- Lätt blur, så former bakom syns genom bokstäverna
- Mycket genomskinlig fyllning över en ljus bakgrund
- Tunn, lätt text i vitt
- Glaspaneler som scrollar över innehåll som ändras

### Läsbart glas

- Blur på 16 px eller mer så att bakgrunden löses upp
- En tonad fyllning som är stark nog att garantera kontrasten
- Medium eller fet vikt för text på glas
- Glas fäst över en känd, kontrollerad bakgrund

Ett pålitligt knep är att tona glaset mot den mörkaste färgen i bakgrunden i stället för att använda vitt. Ett mörkt, 50 % indigoglas över en gradient i indigo och rosa håller vit text läsbar överallt, samtidigt som färgen syns igenom. Fler sätt att hålla orden tydliga finns i [text på en gradient](https://gradiently.design/sv/guide/text-on-gradient).

## När glassmorphism hjälper, och när det inte gör det

- **Hjälper:** flytande navigering, dialogrutor, mediakontroller, kort över en hero och widgets i låsskärmsstil, där lagret ska kännas som att det ligger ovanpå innehållet
- **Hjälper:** produkt- och lanseringssidor där gradienten är varumärket och glaset visar upp den
- **Stjälper:** formulär, tabeller och långa texter, där människor behöver lugn, jämn kontrast
- **Stjälper:** sidor med många staplade glaslager, som ser grumliga ut och kostar prestanda
- **Stjälper:** överallt där bakgrunden är platt eller rörig av foton och liten text

## Så designar du ett glasgränssnitt

1. **Designa bakgrunden först** Välj en gradient med åtskilda fläckar av färg på en djup bas. Glaset blir bara så bra som det som ligger bakom.
2. **Begränsa glaset till ett eller två lager** Navigering och en nivå av kort räcker gott. Glas på glas på glas blir grått.
3. **Sudda tillräckligt för att lösa upp detaljer** Om du fortfarande kan urskilja former bakom panelen, öka blurren före allt annat.
4. **Tona för kontrastens skull** Välj den fyllningsfärg och opacitet som håller texten läsbar över bakgrundens ljusaste del.
5. **Lägg till en ljus kant och en mjuk skugga** En genomskinlig kant på 1 px och en bred, svag skugga får panelen att läsas som en fysisk skiva.
6. **Testa prestandan på en telefon** Backdrop blur är dyrt att rita. Håll de suddiga ytorna måttliga och undvik att animera dem på stora ytor.

Glas är ett av flera material en gradient kan bära; [gradienttextur](https://gradiently.design/sv/guide/gradient-texture) jämför det med korn, papper och siden. Om du vill ha en bakgrund som redan har de fläckar, det djup och det ljus glas behöver är många Marks på Marknaden byggda så, och du kan designa med vilken som helst av dem gratis.

## FAQ

### Vad är glassmorphism?

Glassmorphism är en designstil som använder genomskinliga paneler av frostat glas med suddiga bakgrunder, en ljus kant och en mjuk skugga, lagda över färgstarka gradienter.

### Hur gör jag en glaseffekt i CSS?

Använd `backdrop-filter: blur()` med en halvgenomskinlig bakgrundsfärg, en tunn genomskinlig kant och en mjuk skugga, plus prefixet `-webkit-` för äldre Safari.

### Är glassmorphism tillgängligt?

Det kan vara det, om blurren är stark, fyllningen är tonad nog att hålla texten på 4,5:1 kontrast över den ljusaste bakgrunden och det finns en solid reserv.

### Varför ser min glaspanel grå ut?

Bakgrunden bakom den är för platt. Glas behöver starka, åtskilda färgytor bakom sig att fånga upp.

### Skadar backdrop-filter prestandan?

Det kostar mer än en vanlig bakgrund, särskilt över stora ytor eller vid animering. Använd det för några få paneler och testa på telefoner.