Lag trendy frostet glass-UI. Juster uskarphet, gjennomsiktighet og kanter, og kopier CSS rett inn i prosjektet. 100 % gratis. Ingen registrering.
Den trendy frostede glasseffekten for moderne webdesign.
Bygget fra grunnen av for strengt personvern, umiddelbar utførelse og null friksjon. Ingen abonnementer, betalingsmurer eller kontoregistreringer kreves.
Juster uskarphet, dekkevne og metning i sanntid over en livlig bakgrunn, og forhåndsvis glasseffekten med en gang.
Genererer automatisk webkit-prefikset backdrop-filter-kode for kompatibilitet i Safari, Chrome og Firefox.
Generer vanlige CSS-klasser, eller oversett det visuelle designet til utility-klasser for Tailwind CSS.
100 % kjøring på klientsiden betyr at du kan dra skyvere og se CSS-oppdateringene uten forsinkelse.
Sammenlign vår lokale første WebAssembly-motor med eldre skyverktøy.
| Funksjon | Utiliome (lokal nettleser) | Eldre skykonverterere |
|---|---|---|
| Live forhåndsvisning | Interaktivt lerret i sanntid | Statiske kodegeneratorer |
| Kodeutdata | Vanilje-CSS og Tailwind-utilityklasser | Kun CSS |
| Kompatibilitet | Legger automatisk til -webkit-backdrop-filter | Krever manuelt prefiks |
| Kostnad | Gratis for alltid uten reklame | Betalingsmur for premiumoppsett |
Ingen programvareinstallasjon kreves. Alt kjører direkte i nettleseren din.
Bruk uskarphetsskyveren til å styre hvor sterkt bakgrunnselementene skal frostes bak glasskortet.
Endre bakgrunnsfargens alfakanal for en diskret mørk skifertone eller et lyst, frostet hvitpreg.
Klikk på eksportknappen for å kopiere produksjonsklar CSS rett til utklippstavlen.
Kort svar: Glassmorphism er en moderne grensesnittsretning med halvtransparente bakgrunner, sterk bakgrunnsuskarphet (frostet glass), milde flerlags skygger og tynne kanter. Det skaper vertikal dybde og hierarki.
Trenden har røtter i macOS Big Sur, iOS og Windows 11 Fluent Design, og er blitt de facto-standarden for moderne, premium webapplikasjoner.
Kjernefilosofien ligger i «Z-aksen». Ved å gjøre det øverste laget halvtransparent og sterkt blurre de livlige lagene under, etablerer designere visuelt hierarki uten harde drop shadows. Brukeren får kontekst om hva som skjer «bak» det aktive vinduet.
Kort svar: CSS-egenskapen backdrop-filter bruker grafiske effekter som uskarphet eller fargeskift på området rett bak et element. I motsetning til vanlig «filter», som blurre elementet selv, påvirker backdrop-filter bare det som synes gjennom den transparente bakgrunnen.
For å oppnå glassmorphism stoler utviklere helt på CSS-regelen backdrop-filter. Når et element har en halvtransparent bakgrunn (for eksempel background: rgba(255, 255, 255, 0.2);) og du bruker backdrop-filter: blur(10px);, henter nettleserens rendermotor pikslene rett bak elementet, blurre dem matematisk og maler dem inne i elementet.
Fordi dette krever at nettleseren stadig beregner piksler på nytt mens brukeren scroller, er det en maskinvareakselerert egenskap. Utiliomes generator beregner disse maskinvaremetrikkene med en gang, slik at du kan forhåndsvise ytelseseffekten i sanntid.
Kort svar: Tailwind CSS har innebygde verktøy for glasseffekter. Kombiner «backdrop-blur-md», «bg-white/30» og en tynn «border-white/20» for et frostet glassuttrykk uten egendefinert CSS.
Egendefinert CSS er fint for læring, men moderne utviklere foretrekker ofte utility-rammeverk som Tailwind.
For å bygge et glasskort i Tailwind trenger du tre lag:
backdrop-blur-md eller backdrop-blur-lg for å froste bakgrunnen.bg-white/20 (lys modus) eller bg-slate-900/40 (mørk modus) for å gi glasset fysisk nærvær.border border-white/20.Utiliomes generator har en bryter for vanlig CSS eller en ferdigformatert Tailwind-klassestring.
Kort svar: Safari har historisk krevd «-webkit-»-prefiks for backdrop-filter. Uten prefikset faller glasseffekten helt bort på iOS og macOS, og du sitter igjen med en flat, transparent boks.
En vanlig felle når man implementerer glassmorphism, er å glemme Apple-maskinvare. Chrome og Firefox støtter standard backdrop-filter nativt, men Safari (særlig eldre iOS) krever leverandørprefiks.
Uten -webkit-backdrop-filter: blur(10px); ser Apple-brukere bare en forvirrende transparent div, og teksten blir uleselig mot bakgrunnen.
Utiliomes CSS-generator setter inn nødvendige WebKit-prefikser automatisk, slik at designet ser likt ut på alle store operativsystemer.
Kort svar: Glassmorphism gir ofte tilgjengelighetsbrudd fordi tekst over en bluret, livlig bakgrunn kan feile WCAG-kontrastkrav. Tekstfargen må være mørk (eller lys) nok mot glassets gjennomsnittlige tint.
Den vanligste kritikken av glassmorphism er dårlig tilgjengelighet. Hvis et fargerikt bakgrunnsbilde skifter fra mørkeblått til sterkt gult bak glasskortet, kan hvit tekst plutselig bli usynlig.
Løsningen er en sterk bakgrunnstint (dekkevne). Bruker du hvit tekst, bør glassbakgrunnen være noe i retning rgba(0, 0, 0, 0.6). Da holder teksten minst 4,5:1-kontrast uansett hvilket bilde som passerer bak glasset.
Kort svar: Et frostet glasspanel som ligger flatt, ser ikke ut som glass. Løft det med en diskret, bred drop shadow (for eksempel box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) for å skille det fra bakgrunnslaget.
Hjernen trenger lyscues for å lese dybde. Bare å blurre bakgrunnen kan få UI-et til å se «flatt» ut.
For at glasset skal løfte seg, må du heve det på Z-aksen. Utiliomes generator lar deg justere en diskret box-shadow. Hold skyggedekkevnen svært lav (rundt 10 %) og blur-radiusen høy (32 px), så får du myk ambient occlusion som skiller glasset fra den livlige bakgrunnen.
Alt du trenger å vite om å bruke Utiliomes gratis Glassmorphism CSS-generator.
Safari krever prefikset «-webkit-backdrop-filter». Utiliome genererer dette automatisk i CSS-eksporten for kompatibilitet på tvers av nettlesere.
Ja. Utiliomes generator har en bryter som oversetter det visuelle designet til Tailwind-utilityklasser (for eksempel backdrop-blur-md bg-white/30).
Ja, for mye sterk uskarphet på store elementer kan gi lag på svake mobilenheter, fordi GPU-en stadig må beregne piksler under scrolling.
Ekte glass reflekterer lys i kantene. Legg til en 1 px heltrukket ramme med svært lav dekkevne (som rgba(255, 255, 255, 0.2)) for å simulere denne kantrefleksen.
Ja, 100 % gratis uten grenser, reklame eller krav om konto.