CSS Glassmorphism-generator

Det här verktyget bygger en frostat-glas-effekt (glassmorphism) i CSS genom att kombinera en halvtransparent bakgrund med backdrop-filter: blur() — dra reglagen över den färgglada förhandsvisningen för att se glaskortet sudda ut vad som helst bakom det, kopiera sedan CSS:en. Det ger även ut -webkit-backdrop-filter-prefixet Safari behöver, eftersom backdrop-filter fortfarande kräver det där.

Vad är detta verktyg?

Glassmorphism är en UI-stil där ett element ser ut som frostat glas: en halvtransparent bakgrund låter färger bakom den skina igenom, medan backdrop-filter: blur() suddar ut den bakgrunden så den läses som glas snarare än en enkel transparent panel. En tunn, halvtransparent ram och rundade hörn färdigställer vanligtvis utseendet.

Det här verktyget låter dig bygga den effekten visuellt. Förhandsvisningen ligger över en rörlig gradientbakgrund specifikt så att oskärpan syns — glassmorphism läses bara korrekt över något med färg eller detalj bakom sig, inte en platt vit sida. Justera bakgrundsfärgens opacitet, oskärpans styrka, ramens opacitet och hörnradien, kopiera sedan den genererade CSS:en.

Källa: Filter Effects Module Level 1, W3C — definierar backdrop-filter, egenskapen den här effekten bygger på.

Varför använda det?

Förhandsvisning live över en färgglad animerad bakgrund, så du faktiskt kan se den frostade glaseffekten istället för att gissa dig till oskärpevärden mot en tom bakgrund.
Full kontroll över bakgrundsopacitet, backdrop-blur-styrka, ramopacitet och border-radius på ett ställe.
Ger ut både backdrop-filter och -webkit-backdrop-filter-prefixet automatiskt, så du inte glömmer Safari-stöd.
Körs helt i din webbläsare — inget du konfigurerar laddas upp någonstans.
Gratis, ingen registrering, fungerar på mobilen.

Så använder du det

Välj en bakgrundsfärg och justera dess opacitet — lägre opacitet (10–25 %) läses som glas; högre opacitet ser mer ut som en solid tonad panel.
Öka oskärpans styrka för att sudda ut det som ligger bakom elementet — det är det som faktiskt skapar det frostade-glas-utseendet, skilt från själva transparensen.
Justera ramens opacitet för att lägga till en subtil ljus kant, vilket hjälper glaskortet att läsas som en distinkt yta istället för att smälta in i bakgrunden.
Ställ in border-radius för rundade hörn — glassmorphism-kort är nästan alltid rundade, sällan skarpkantade.
Kopiera den genererade CSS:en och klistra in den i din stilmall. Kom ihåg att elementet behöver något med färg eller textur bakom sig — glassmorphism är osynligt över en platt, enfärgad bakgrund.

Exempel

Inmatning

Bakgrund: vit med 20 % opacitet · Oskärpa: 10px · Ramopacitet: 30 % · Radie: 16px

Resultat

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

En klassisk frostat-glas-kortstil som används i inloggningspaneler, navigeringsfält och dashboard-widgets över en färgglad bakgrund eller fotobakgrund.

Safari och webbläsarstöd

backdrop-filter stöds i aktuella versioner av Chrome, Firefox, Edge och Safari, men Safari har historiskt krävt -webkit-backdrop-filter-prefixet tillsammans med den oprefixade egenskapen för att rendera oskärpan — utan det ignorerar äldre Safari-versioner tyst oskärpan och visar bara den platta transparenta bakgrunden. Det här verktyget ger därför alltid ut båda deklarationerna.

Se MDN:s dokumentation för backdrop-filter för aktuella detaljer om webbläsarkompatibilitet: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Varför glassmorphism behöver något bakom sig

backdrop-filter suddar bara ut vad som visuellt ligger bakom elementet — en bakgrundsbild, en gradient, ett annat färgat element, eller innehåll som skrollar under. Över en ren vit eller enfärgad bakgrund finns inget att sudda ut, så effekten är osynlig och elementet ser bara ut som en lätt tonad, rundad ruta. Placera alltid glassmorphism-element över en gradient, ett foto eller en annars livlig bakgrund för att effekten ska synas.

Kombinera med andra CSS-effekter

Glassmorphism-kort kombineras ofta med en subtil box-shadow underifrån för extra djup. Generera frostat-glas-CSS:en här, lägg sedan till en mjuk skugga med Box Shadow Generator och applicera båda deklarationerna på samma element.

→ Box Shadow-generator · Border Radius-generator

Vanliga frågor

Varför visas inte glaseffekten på min sida?

backdrop-filter suddar ut det som ligger bakom elementet. Om ditt element ligger över en ren vit eller enfärgad bakgrund finns inget visuellt intressant att sudda ut, så det ser bara ut som en svagt tonad ruta. Placera det över en gradient, bild eller annan detaljrik bakgrund för att den frostade glaseffekten ska synas.

Behöver jag -webkit-backdrop-filter-prefixet?

Ja, om du vill att effekten ska renderas pålitligt i Safari. Det här verktyget ger alltid ut både den vanliga backdrop-filter och den -webkit-prefixade versionen tillsammans, eftersom Safari historiskt har behövt prefixet för att applicera oskärpan.

Vad är skillnaden mellan bakgrundsopacitet och oskärpa?

Bakgrundsopacitet styr hur mycket av din valda tonfärg som visas jämfört med hur mycket av det som ligger bakom som lyser igenom oförändrat. Oskärpa styr hur mycket den synliga bakgrunden smetas ut/mjukas upp. Glassmorphism använder båda tillsammans — viss transparens plus viss oskärpa — snarare än endera ensamt.

Kan jag använda backdrop-filter på vilket element som helst?

Ja, men den påverkar bara vad som visuellt ligger bakom det elementet inom sidans rendering, inte elementets egna underordnade element. Den har också en prestandakostnad på vissa enheter när den appliceras på många element eller animeras ofta, så den används bäst för ett litet antal framträdande UI-ytor som kort, modaler eller navigeringsfält snarare än dussintals små element.

Varför är min ram knappt synlig?

Ramen i det här verktyget använder en halvtransparent vit, vilket är tänkt att vara subtilt — en ljus kant som hjälper glaspanelen läsas som en distinkt yta utan att se ut som en hård, ogenomskinlig kontur. Höj ramens opacitetsreglage om du vill ha en mer synlig kant.