Glassmorphism-generator

Skapa en yta av frostat glas

Glassmorphism fungerar genom att bakgrunden lyser igenom en genomskinlig yta medan en oskärpa mjukar upp vad som finns bakom. Resultatet kan kännas polerat och modernt när det används med måtta. Den här glassmorphism-generatorn ger dig direkt kontroll över de viktiga delarna: nyans, transparens, bakgrundsoskärpa, kantlinjens opacitet, radie och skugga. När du justerar värdena uppdateras kortet över en färgglad gradient så att du kan bedöma om glaseffekten syns utan att innehållet blir svårläst.

Den genererade CSS-koden innehåller background, backdrop-filter, en motsvarande egenskap med WebKit-prefix, en diskret kantlinje, hörnradie och skugga. Dessa deklarationer räcker för ett återanvändbart kort, en navigeringspanel, en modal, en hero-overlay eller en instrumentpanelswidget. Eftersom effekten är ren CSS finns det inga bilder att exportera och ingen serverbearbetning. Webbläsaren renderar förhandsgranskningen och kopieringsknappen skriver CSS-texten till ditt urklipp.

Balansera transparens och läsbarhet

Det vanligaste glassmorphism-misstaget är att göra kortet för transparent. En låg opacitet kan se imponerande ut i en tom förhandsgranskning, men riktiga rubriker, etiketter och ikoner behöver tillräcklig kontrast för att förbli läsbara på alla bakgrunder. Öka opaciteten när bakgrunden är rörig, sänk den när bakgrunden är enkel, och använd kantlinjen för att skilja ytan från liknande färger. Oskärpa hjälper till att dämpa detaljer bakom kortet, men ersätter inte kontrasttester.

Var effekten passar

Frostat glas fungerar bäst i fokuserade ögonblick: ett priskort över en hero-gradient, ett flytande verktygsfält, en profilsammanfattning eller en modal ovanpå rik grafik. Det blir stökigt när varje komponent använder det samtidigt. När du har kopierat CSS-koden, testa den i den verkliga layouten och lägg till en solid reservbakgrund om du stöder äldre webbläsare eller enheter med mycket låg prestanda. Ett bra glaskort ska kännas skiktat och samtidigt låta gränssnittets hierarki och innehåll vara tydliga.