Crea efectes d'interfície de vidre esmerilat en tendència. Ajusta el desenfocament, la transparència i les vores, després copia el CSS directament al teu projecte. 100% gratuït. No requereix registre.
L'efecte modern de vidre deslustrat per al disseny web actual.
Privacitat estricta i execució ràpida. Sense subscripcions ni comptes requerits.
Ajusta el desenfocament, l'opacitat i la saturació en temps real sobre un fons vibrant per a una previsualització instantània.
Genera automàticament codi backdrop-filter amb prefix webkit assegurant la compatibilitat amb Safari, Chrome i Firefox.
Genera classes CSS estàndard o tradueix a l'instant el teu disseny visual en classes d'utilitat per a Tailwind CSS.
L'execució 100% al costat del client permet moure lliscadors i veure les actualitzacions de CSS immediatament sense retard.
Compara el nostre motor local WebAssembly amb eines al núvol.
| Funció | Utiliome (Navegador Local) | Convertidors al núvol |
|---|---|---|
| Vista prèvia en directe | Llenç interactiu en temps real | Generadors de codi estàtic |
| Sortida de codi | Vanilla CSS i classes d'utilitat Tailwind | Només CSS |
| Compatibilitat | Afegeix automàticament -webkit-backdrop-filter | Requereix prefixat manual |
| Cost | Gratuït per sempre i sense anuncis | Murs de pagament per a dissenys premium |
Sense instal·lar res. Tot s'executa al teu navegador web.
Utilitza el lliscador de desenfocament per determinar el nivell d'opacitat dels elements que queden darrere de la targeta.
Modifica el canal alfa del color de fons per donar un to fosc subtil o un aspecte de vidre desglossat blanc i brillant.
Fes clic al botó d'exportació per copiar el fragment de CSS a punt per a producció directament al portapapers.
Resposta ràpida: El Glassmorphism és una tendència moderna de disseny d'interfícies caracteritzada per fons semitransparents amb un fort desenfocament de fons, ombres subtils de diverses capes i vorells fins. Crea profunditat vertical.
Originat en macOS Big Sur, iOS i Windows 11 Fluent Design, el Glassmorphism s'ha convertit en l'estàndard per a aplicacions web modernes i premium.
La filosofia principal es basa en l'"eix Z". En fer que la capa superior sigui semitransparent i desenfocar les capes vibrants inferiors, els dissenyadors estableixen una jerarquia visual sense ombres dures. Això aporta context sobre què passa "darrere" de la finestra activa.
Resposta ràpida: La propietat CSS backdrop-filter aplica efectes gràfics com el desenfocament o el canvi de color a l'àrea situada just darrere d'un element. A diferència de 'filter', només afecta allò visible a través del fons transparent de l'element.
Per aconseguir l'efecte Glassmorphism, els desenvolupadors utilitzen la regla CSS backdrop-filter. Quan s'estableix un fons semitransparent (ex. background: rgba(255, 255, 255, 0.2);) i s'aplica backdrop-filter: blur(10px);, el motor de renderitzat agafa els píxels de darrere, els desenfoca i els dibuixa dins de l'element.
Com que requereix recalculs constants de píxels en fer desplaçament, és una propietat accelerada per maquinari. El generador d'Utiliome calcula aquestes mètriques a l'instant per avaluar l'impacte en el rendiment.
Resposta ràpida: Tailwind CSS inclou utilitats per a efectes de vidre. Combina 'backdrop-blur-md', 'bg-white/30' i un vorell fi 'border-white/20' per crear l'efecte de vidre desglossat sense escriure CSS personalitzat.
Encara que escriure CSS personalitzat és ideal per aprendre, els desenvolupadors sovint prefereixen entorns com Tailwind.
Per crear una targeta de vidre a Tailwind, necessites tres capes essencials:
backdrop-blur-md o backdrop-blur-lg per desenfocar el fons.bg-white/20 (mode clar) o bg-slate-900/40 (mode fosc) per donar presència física al vidre.border border-white/20.El generador d'Utiliome ofereix un selector per obtenir CSS estàndard o una cadena de classes de Tailwind perfectament formatejada.
Resposta ràpida: Històricament Safari ha requerit el prefix '-webkit-' per als filtres de fons. Si l'omets, l'efecte de vidre fallarà a iOS i macOS, mostrant una caixa transparent plana.
Un error comú en implementar glassmorphism és oblidar els dispositius Apple. Mentrestant Chrome i Firefox admeten la propietat backdrop-filter de forma nativa, Safari (especialment versions anteriors d'iOS) requereix el prefix de proveïdor.
Si no s'inclou -webkit-backdrop-filter: blur(10px);, els usuaris d'Apple veuran un contenidor div transparent que farà el text il·legible sobre el fons.
El generador de CSS d'Utiliome injecta automàticament els prefixos WebKit necessaris al codi de sortida, assegurant que el disseny es vegi idèntic a tots els sistemes operatius.
Resposta ràpida: El Glassmorphism pot provocar problemes d'accessibilitat si el text sobre un fons desenfocat no compleix les ràtios de contrast WCAG. Has d'assegurar-te que el color del text sigui prou fosquet (o clar) respecte al vidre.
La crítica més freqüent del glassmorphism és la manca d'accessibilitat. Si una imatge de fons canvia de blau fosc a groc brillant darrere de la targeta, el text blanc pot quedar invisible.
Per solucionar-ho, s'ha d'aplicar una opacitat de fons adequada. Per exemple, amb text blanc, utilitza un fons de vidre similar a rgba(0, 0, 0, 0.6). Això garanteix que el text mantingui sempre la ràtio de contrast mínima de 4.5:1 exigida per la llei.
Resposta ràpida: Un panell de vidre sense ombra sembla pla. Cal elevar-lo utilitzant una ombra molt subtil i ampla (ex. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) per separar-lo de la capa de fons.
El cervell humà necessita senyals d'il·luminació per interpretar la profunditat. Si només es desenfoca el fons, la interfície pot semblar plana.
Per fer ressaltar el vidre, cal elevar-lo a l'eix Z. El generador d'Utiliome permet ajustar un box-shadow subtil. Amb una opacitat d'ombra molt baixa (al voltant del 10%) i un radi de desenfocament alt (32px), es crea un efecte suau d'oclusió ambiental que separa el vidre del fons.
Tot el que cal saber sobre l'ús de l'eina Generador CSS Glassmorphism d'Utiliome.
Safari requereix el prefix '-webkit-backdrop-filter'. Utiliome el genera automàticament a l'exportació de CSS per garantir la compatibilitat.
Sí. El generador d'Utiliome inclou un botó per traduir el disseny visual a classes d'utilitat de Tailwind (ex. backdrop-blur-md bg-white/30).
Sí, l'ús excessiu de desenfocaments intensos en elements grans pot causar retards en dispositius mòbils poc potents en forçar la GPU a recalcular píxels.
El vidre real reflecteix la llum als vora. Afegeix un vorell d'1px amb opacitat molt baixa (com rgba(255, 255, 255, 0.2)) per simular aquest reflex.
Sí, 100% gratuït sense límits, anuncis ni registre d'usuari.
Tens una petició de funció o has trobat un error? Xateja amb nosaltres a Discord.