Glasomorfism-generator
Free online Glassmorphism Generator tool, no installation required
Om Glassmorphism Generator
Skapa en glassmorphism-kortstil genom att kombinera en genomskinlig bakgrundsfärg, valfri ram, rundade hörn och en backdrop-filter med blur (oskärpa) och saturation (mättnad). Utdatan är ett komplett utdrag med fem deklarationer (background, border, border-radius, backdrop-filter, -webkit-backdrop-filter) som förhandsvisas live över en fast flerstegsgradient.
Så här använder du
1. Välj Background Color och dra i Opacity (0–1 i steg om 0,05) — dessa bildar tillsammans rgba()-bakgrunden. 2. Välj en Border Color och ställ in Border Width (0–5px) och Border Radius (0–50px). 3. Ställ in Blur (1–30px) och Saturation (100–200%) för backdrop-filter. 4. Klicka på Copy för att kopiera CSS-utdraget på fem rader.
Genererat utdrag
Den genererade CSS:en innehåller alltid fem rader: background: rgba(r, g, b, opacity); border: {width}px solid {color}; border-radius: {radius}px; backdrop-filter: blur({blur}px) saturate({sat}%); och motsvarande -webkit-backdrop-filter för Safari. background-color konverteras från hex-väljaren till ett rgba()-värde med reglagets opacity. Förhandsvisningen använder en fast femstegsgradient och kan inte ändras.
▶Varför finns det inget fält för bakgrunden bakom glaset?
▶Innehåller utdraget prefixet -webkit-backdrop-filter?
▶Varför ser förhandsvisningen platt ut i Firefox?
▶Kan jag lägga till en box-shadow på glaset?
Om detta verktyg har varit till hjälp för dig, överväg att bjuda mig på en kaffe.
Bjud mig på en kaffe