Glassmorphism-generator
Skapa frostade glas-UI-kort med backdrop-oskärpa, genomskinlighet och kantlinjer, och kopiera sedan CSS-koden.
Glaskort
Frostat glas som svävar över en livfull bakgrund.
—
Genererar både backdrop-filter och -webkit-backdrop-filter. Obs: backdrop-filter stöds inte i äldre webbläsare (t.ex. Firefox under 103); lägg till en solid reservbakgrund för dessa.
Om Glassmorphism-generator
Glassmorphism-generatorn bygger frostat-glas-effekten: en genomskinlig panel som suddar ut allt bakom den. Skjutreglage styr backdrop-filter-oskärpan och mättnaden, glasets tonfärg och genomskinlighet, ramfärgen och opaciteten, hörnradien och en yttre skugga — varje ändring renderas direkt över en tydlig bakgrund så att du kan bedöma effekten realistiskt.
Fyra kvalitetsförinställningar — subtle, frosted, vivid och dark glass — ger dig beprövade kombinationer att utgå från. Den mörka förinställningen visar hur samma recept anpassas till mörka gränssnitt, där en svag ljus ram gör det mesta av jobbet att skilja glaset från bakgrunden.
Den genererade CSS-koden innehåller både backdrop-filter och prefixet -webkit-backdrop-filter som Safari kräver. Notera kompatibilitetsförbehållet: äldre webbläsare (till exempel Firefox före version 103) stöder inte backdrop-filter, så leverera en solid reservbakgrund för dem.
Så använder du Glassmorphism-generator
- Utgå från en förinställning — subtle, frosted, vivid eller dark glass — eller från standardvärdena.
- Justera oskärpan och mättnaden för backdrop-filtret.
- Ställ in glasets tonfärg och dess genomskinlighet.
- Finjustera ramfärg, ramopacitet, hörnradie och ytterskugga.
- Kopiera CSS-koden — den innehåller redan den -webkit--prefixade egenskapen för Safari.