Glassmorphism och gradienter: en praktisk guide

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.

De bästa glasbakgrunderna har starka, åtskilda färgytor och en mörk eller djup bas, ungefär som meshgradienter eller norrskensgradienter. 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 och 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 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.

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.

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

   Tona för kontrastens skull

   Välj den fyllningsfärg och opacitet som håller texten läsbar över bakgrundens ljusaste del.

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