Utiliome

Generador CSS Glassmorphism

Crea efectes de vidre desglossat per a interfícies. Ajusta desenfocament, transparència i vorells, i copia el CSS. 100% gratuït.

Glass Properties

10px
0.20
0.30

Glassmorphism

The trendy frosted glass effect for modern web design.

Drag me around!

Eines relacionades

Eines que també et podrien fer falta

Generador de paletes de colors

Genera, ajusta i exporta paletes de colors i degradats pel teu projecte UI.

Generador de degradats CSS

Crea i personalitza bells degradats CSS visualment i copia el codi a l'instant.

Extreu paleta de colors

Puja una imatge per extreure a l'instant la seva paleta de colors.

Extractor de colors dominants

Puja una imatge per extreure a l'instant els seus colors dominants.

Generador de Favicon

Genera favicons estàndard i d'alta resolució fàcilment per als teus projectes.

Generador ICO

Converteix imatges a format ICO per a icones i favicons de Windows.

100% Privat • Sense pujades al servidor

Per què usar Generador CSS Glassmorphism gratuït d'Utiliome?

Privacitat estricta i execució ràpida. Sense subscripcions ni comptes requerits.

Sandbox Visual

Ajusta el desenfocament, l'opacitat i la saturació en temps real sobre un fons vibrant per a una previsualització instantània.

CSS Multinavegador

Genera automàticament codi backdrop-filter amb prefix webkit assegurant la compatibilitat amb Safari, Chrome i Firefox.

Compatible amb Tailwind

Genera classes CSS estàndard o tradueix a l'instant el teu disseny visual en classes d'utilitat per a Tailwind CSS.

Latència Zero

L'execució 100% al costat del client permet moure lliscadors i veure les actualitzacions de CSS immediatament sense retard.

Utiliome vs Alternatives al núvol

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

Com utilitzar Generador CSS Glassmorphism en 3 passos

Sense instal·lar res. Tot s'executa al teu navegador web.

1

Ajusta el Desenfocament

Utilitza el lliscador de desenfocament per determinar el nivell d'opacitat dels elements que queden darrere de la targeta.

2

Ajusta l'Opacitat i el Color

Modifica el canal alfa del color de fons per donar un to fosc subtil o un aspecte de vidre desglossat blanc i brillant.

3

Copia el CSS

Fes clic al botó d'exportació per copiar el fragment de CSS a punt per a producció directament al portapapers.

Què és la tendència UI de Glassmorphism?

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.

Com funciona la propietat CSS backdrop-filter?

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.

Com crear Glassmorphism a Tailwind CSS

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:

  • El Desenfocament: Utilitza backdrop-blur-md o backdrop-blur-lg per desenfocar el fons.
  • El Tinter: Utilitza bg-white/20 (mode clar) o bg-slate-900/40 (mode fosc) per donar presència física al vidre.
  • El Vorell: El vidre real capta la llum als marges. Simula-ho amb un vorell fi d'1px utilitzant 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.

Compatibilitat multinavegador (Problemes a Safari)

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.

Accessibilitat (a11y) i Contrast de Text en Glassmorphism

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.

Com afegir Il·luminació Realista amb Ombres

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.

Generador CSS Glassmorphism PMF i Guia Tècnica

Tot el que cal saber sobre l'ús de l'eina generador glassmorphism online gratis d'Utiliome.

Per què no funciona l'efecte de vidre a Safari?

Safari requereix el prefix '-webkit-backdrop-filter'. Utiliome el genera automàticament a l'exportació de CSS per garantir la compatibilitat.

Puc utilitzar Glassmorphism a Tailwind CSS?

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).

El backdrop-filter alenteix el rendiment del lloc web?

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.

Com aconseguir que els vora del vidre semblin reals?

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.

Aquest generador CSS és completament gratuït?

Sí, 100% gratuït sense límits, anuncis ni registre d'usuari.