Hoppa till innehåll

CSS Glassmorphism Generator

Skapa CSS glassmorphism-effekter visuellt med liveförhandsvisning. Justera oskärpa, opacitet, färg och kantlinje. Kopiera CSS-kod för frostat glas-UI. Gratis onlineverktyg.

Förhandsvisning

Glassmorphism
10px
20%
30%

CSS-utdata

 

Vad är Glassmorphism?

Glassmorphism är en modern UI-designtrend som skapar en frostad glaseffekt med CSS backdrop-filter. Effekten har en halvtransparent bakgrund med oskärpa som avslöjar innehållet bakom, vilket skapar ett djup.

Webbläsarstöd

Egenskapen backdrop-filter stöds i alla moderna webbläsare. För äldre WebKit-webbläsare ingår prefixet -webkit-backdrop-filter. Observera att denna effekt kräver att innehåll bakom glaselementet är synligt.

Integritet

All glassmorphism-generering körs 100 % i din webbläsare. Ingen data skickas till någon server.