Gerador de glassmorphism
NovoDesenhe um cartão de vidro fosco e copie o CSS, com pré-visualização ao vivo.
Browser support. backdrop-filter works in all current browsers; the copied CSS includes the -webkit- prefix for Safari. Unsupported browsers fall back to the plain translucent background.
Readability. Transparency changes contrast over busy backgrounds. Raise the tint opacity and aim for a 4.5:1 text-contrast ratio so content stays legible.
Runs entirely in your browser. Nothing is uploaded.
Crie glassmorphism visualmente, sem escrever CSS à mão
Este gerador de glassmorphism permite-lhe construir o visual de vidro fosco de forma visual — arraste os controlos de blur, transparência, tint, saturação, borda e sombra e veja um cartão de vidro a atualizar-se em tempo real. Quando o resultado estiver ao seu gosto, copie o CSS exato (com o prefixo -webkit-), as classes Tailwind equivalentes ou um fragmento HTML pronto a colar. Sem adivinhações nos valores de backdrop-filter e sem instalações — tudo corre no seu browser.
O glassmorphism é o estilo de interface translúcida e fosca popularizado pelo macOS, Windows 11 e inúmeros dashboards modernos. Acrescenta profundidade e elegância a cartões, modais, barras de navegação e formulários de login, mantendo o fundo colorido visível através da superfície. Acertar nesses valores à mão implica ciclos constantes de gravação e atualização; esta ferramenta permite-lhe saltar tudo isso.
Como funciona o efeito de vidro fosco
Três propriedades CSS criam o efeito. Um fundo semi-transparente como rgba(255,255,255,0.18) deixa o conteúdo mostrar-se. Um backdrop blur — backdrop-filter: blur(10px) — fosca tudo o que está por detrás do elemento, em vez do seu próprio conteúdo. E uma borda fina como 1px solid rgba(255,255,255,0.3) capta a luz ao longo da margem. Adicione um box-shadow suave e um border-radius generoso e o painel parece um painel de vidro real.
A saturação também importa: encadear saturate(120%) ao blur intensifica as cores que atravessam o vidro, conferindo ao vidro premium o seu visual vivo e luminoso. Esta ferramenta expõe todos estes controlos — raio de blur, cor do tint, opacidade do tint, saturação, largura da borda, opacidade da borda, border-radius e intensidade da sombra — para que possa ajustar o CSS de vidro fosco com precisão, sem editar uma linha de código.
Saída em CSS e Tailwind, lado a lado
Mude os separadores de saída para obter o seu efeito como CSS puro, como classes de Tailwind glassmorphism, ou como um fragmento HTML + <style> completo pronto a colar. A saída CSS inclui sempre o prefixo -webkit-backdrop-filter para cobertura do Safari. A saída Tailwind usa utilitários de valor arbitrário como backdrop-blur-[10px], bg-[#ffffff]/18, border-[#ffffff]/30 e rounded-[16px] para que as classes correspondam exatamente aos seus controlos — útil quer prefira CSS escrito à mão ou um fluxo de trabalho utility-first.
Esta saída dupla é uma das maiores lacunas nas ferramentas concorrentes. Glassmorphism.com e Glass UI exportam apenas CSS simples, obrigando os utilizadores de Tailwind a traduzir os valores manualmente. O UtiloKit faz ambos automaticamente, para que possa copiar diretamente para a sua base de código independentemente da stack.
Pré-visualização com o seu próprio fundo
O vidro só parece vidro quando há algo colorido por detrás, por isso a pré-visualização em tempo real assenta num fundo que controla. Escolha entre predefinições de gradiente — pôr do sol, oceano, aurora, vibrante e uma cena escura — ou carregue a sua própria imagem para testar o vidro sobre a fotografia ou hero exata que vai publicar. É isto que torna a pré-visualização do fundo glassmorphism realista em vez de uma amostra plana, e permite verificar o contraste do texto na parte mais carregada da cena.
O upload de fundo personalizado é uma funcionalidade que o glassmorphism.com não tem. Quando está a criar uma sobreposição de vidro para uma fotografia hero específica, testar com um gradiente genérico não lhe dá uma leitura fiável sobre a legibilidade. Colocar a sua imagem real permite detetar problemas de contraste antes de chegarem à produção.
Como o UtiloKit se compara a outros geradores de glassmorphism
A maioria das alternativas oferece um fragmento CSS básico com um único fundo. O Glassmorphism.com (o popular de Michal Malewicz) não tem saída Tailwind, não permite upload de fundo personalizado e não tem uma hiperligação partilhável para revisão em equipa. O Glass UI (glass-ui.com) é igualmente limitado — não expõe saturação, intensidade de box-shadow ou cor de tint de forma independente. Os tutoriais CSS-tricks e os fragmentos do Codepen oferecem código estático que tem de modificar à mão sempre que um designer muda as especificações.
O UtiloKit dá-lhe todos os controlos num único ecrã: blur, cor do tint, opacidade do tint, saturação, largura da borda, opacidade da borda, border-radius e box-shadow. A hiperligação de partilha codifica todos esses valores no URL, para que possa enviar a um colega a especificação exata. Sem conta, sem upload, sem marca de água — basta copiar e publicar.
Predefinições, suporte de browser e legibilidade
Quatro predefinições de um clique — Cartão fosco, Vidro escuro, Barra de navegação e Vibrante — dão-lhe um ponto de partida sólido que pode depois refinar. O CSS gerado inclui sempre o prefixo -webkit-backdrop-filter, pelo que o efeito funciona no Chrome, Edge, Firefox e Safari, e degrada graciosamente para um preenchimento translúcido simples em browsers sem suporte.
Como a transparência altera o contraste, preste atenção à legibilidade: aumente a opacidade do tint para cerca de 25-40%, adicione saturação para acalmar fundos muito coloridos e procure atingir um rácio de contraste de texto WCAG 4.5:1. Um cartão de vidro deve parecer leve e arejado, mas o seu texto nunca deve ser difícil de ler. Se o texto se tornar difícil de ler na pré-visualização em tempo real, é o sinal para aumentar a opacidade do tint antes de publicar.
Privado, instantâneo e gratuito
Não há registo nem nada para instalar. Cada valor que ajusta, a pré-visualização em tempo real e qualquer imagem que carregue são processados localmente no seu browser — nada é enviado para um servidor. Partilhe uma configuração com um colega através do botão Copiar hiperligação, que incorpora todas as suas definições no URL. Adicione este gerador de glass card aos favoritos e recorra a ele sempre que precisar de um efeito de vidro fosco sem a fricção de uma ferramenta que pede o seu e-mail primeiro.
Frequently asked questions
O que é glassmorphism?
Glassmorphism é um estilo de interface que faz um elemento parecer vidro fosco — um painel semi-transparente que desfoca tudo o que está por detrás, terminado com uma borda fina e uma sombra suave para dar profundidade. Vemo-lo no macOS Big Sur, nas superfícies acrílicas do Windows 11 e em cartões de login modernos. Os três ingredientes são um preenchimento de fundo translúcido, um backdrop blur e uma borda subtil de 1px, por exemplo: background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3).
Como faço um efeito glassmorphism em CSS?
Dê ao elemento um fundo semi-transparente e um backdrop blur, depois adicione uma borda fina. Um bom ponto de partida é: background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2). A chave é que o preenchimento de fundo seja parcialmente transparente para que o blur por detrás apareça. Arraste os controlos acima para afinar e copie o CSS exato.
O que faz o backdrop-filter em CSS?
O backdrop-filter aplica um efeito gráfico — geralmente blur() — à área por detrás de um elemento, não ao conteúdo próprio do elemento. Assim, backdrop-filter: blur(10px) desfoca tudo o que está renderizado por detrás da caixa, criando o visual de vidro fosco. Pode também encadear filtros, por exemplo backdrop-filter: blur(10px) saturate(150%) para desfocar e intensificar a cor por detrás do vidro ao mesmo tempo. Só é visível se o próprio fundo do elemento for pelo menos parcialmente transparente.
Como faço um efeito de vidro fosco?
O vidro fosco é glassmorphism com um blur mais intenso e um tint ligeiramente mais opaco. Experimente: background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px. Aumente o blur para 14-20px e a opacidade do tint para cerca de 20-30% para que a superfície pareça 'fosca' em vez de transparente. A predefinição Cartão fosco no UtiloKit define estes valores de imediato, para que possa partir daí e ajustar.
O backdrop-filter funciona em todos os browsers?
Sim — o backdrop-filter tem suporte em todos os principais browsers atuais (Chrome, Edge, Firefox e Safari). O Safari suporta-o há anos com o prefixo -webkit-backdrop-filter, por isso inclua sempre ambas as linhas: -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px). O gerador de glassmorphism do UtiloKit produz automaticamente a versão com prefixo. Browsers muito antigos sem suporte mostram simplesmente o fundo semi-transparente simples, o que degrada de forma aceitável.
Porque é que o meu backdrop-filter / glassmorphism não está a funcionar?
As três causas habituais são: (1) não há nada por detrás do elemento para desfocar — o backdrop-filter só afeta conteúdo renderizado por detrás, por isso coloque-o sobre uma imagem ou gradiente; (2) o próprio fundo do elemento é totalmente opaco — use um preenchimento rgba() como rgba(255,255,255,0.18) para que o blur apareça; (3) esqueceu-se do prefixo -webkit-backdrop-filter para o Safari. Note também que um elemento pai com filter, transform ou will-change pode criar um bloco de contenção que quebra completamente o efeito.
Como faço glassmorphism em Tailwind CSS?
Combine os utilitários backdrop-blur com um fundo translúcido e uma borda ténue. Por exemplo: class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg". Use backdrop-saturate-150 para intensificar a cor por detrás. Para valores exatos, mude a saída acima para o separador Tailwind — emite classes de valor arbitrário como backdrop-blur-[10px] bg-[#ffffff]/18 border-[1px] border-[#ffffff]/30 rounded-[16px] que correspondem exatamente aos seus controlos.
Qual é a diferença entre glassmorphism e neumorphism?
O glassmorphism usa transparência e blur de fundo para que o elemento pareça vidro fosco a flutuar sobre o conteúdo. O neumorphism (soft UI) é o oposto: elementos opacos com a mesma cor da página, com um aspeto extrudido em 3D graças a sombras duplas de luz e escuro — por exemplo box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff. O glassmorphism precisa de um fundo colorido para brilhar; o neumorphism precisa de um fundo plano de cor única para funcionar.
Qual o valor de blur que devo usar?
Para a maioria dos cartões, um backdrop blur de 8-16px fica bem. Use cerca de 5-8px para um vidro leve e mal fosco, 10-16px para um cartão ou modal típico, e 16-25px para uma barra de navegação ou sobreposição de vidro fosco intenso. Combine mais blur com uma opacidade de tint ligeiramente maior para que o texto se mantenha legível. O controlo de Blur acima vai de 0 a 40px para encontrar o ponto ideal para a sua imagem de fundo específica sem ter de adivinhar.
Como mantenho o texto legível sobre vidro?
A legibilidade vem do contraste entre o texto e o fundo desfocado. Aumente a opacidade do tint para cerca de 25-40% para que a superfície seja menos transparente, adicione backdrop-saturate para atenuar cores vivas por detrás, e escolha uma cor de texto com contraste forte — texto branco sobre vidro com tint escuro, ou texto escuro sobre tint claro. Aponte para o rácio de contraste WCAG 4.5:1 para texto de corpo, e evite colocar texto pequeno sobre a parte mais colorida da imagem de fundo.
O glassmorphism é acessível?
Pode ser, mas requer cuidado. A transparência torna o contraste imprevisível porque a cor por detrás do vidro muda constantemente, o que pode fazer o texto cair abaixo do mínimo WCAG de 4.5:1. Use uma opacidade de tint suficientemente alta (30%+), teste o texto na parte mais carregada do fundo, e não confie apenas no blur para separar o conteúdo. Respeite também os utilizadores que definem prefers-reduced-transparency, fornecendo uma alternativa mais opaca no seu CSS.
Como se compara o gerador de glassmorphism do UtiloKit ao glassmorphism.com e ao Glass UI?
O Glassmorphism.com (de Michal Malewicz) dá-lhe um ponto de partida rápido para um estilo, mas não permite carregar a sua própria imagem de fundo, controlar a saturação ou exportar classes Tailwind. O Glass UI (glass-ui.com) é igualmente limitado — pré-visualização com fundo único, sem saída Tailwind, sem hiperligação partilhável. O UtiloKit permite-lhe arrastar a sua própria imagem, ajustar todos os parâmetros incluindo saturação e intensidade de sombra, obter saída em CSS e Tailwind, e partilhar a configuração exata via URL. Tudo corre no browser sem qualquer upload para servidor.
Como adiciono um glass card ao meu site?
Coloque um contentor sobre uma imagem de fundo ou gradiente, depois aplique o CSS gerado ao cartão. Exemplo mínimo: dê ao elemento pai um fundo, depois estilize o filho com background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24px. Copie o fragmento HTML pronto da saída acima — inclui a marcação e um bloco de estilo que pode colar diretamente na sua página sem configuração adicional.
Posso usar este gerador de glassmorphism no iPhone ou Android?
Sim. O gerador de glassmorphism do UtiloKit é totalmente responsivo e funciona no Safari do iPhone, no Chrome do Android e em qualquer browser móvel moderno. Os controlos são compatíveis com toque, a pré-visualização atualiza em tempo real, e copiar o CSS ou a saída Tailwind funciona a partir da área de transferência do telemóvel tal como no computador. Como tudo corre no browser sem servidor envolvido, não há nada para instalar — basta abrir a página e começar a criar.
Posso partilhar a minha configuração de glassmorphism com um colega?
Sim — clique no botão Copiar hiperligação e todos os valores dos seus controlos ficam codificados diretamente no URL. Partilhe essa hiperligação com um designer ou programador e eles abrem a sua configuração exata: o mesmo blur, a mesma cor e opacidade de tint, a mesma saturação, as mesmas definições de borda e sombra. Sem necessidade de conta, sem ficheiro para exportar. Esta é uma área onde o glassmorphism.com e o Glass UI ficam aquém — nenhum suporta hiperligações de configuração partilháveis.
Related tools
Ver todas as ferramentas
Novo Verificador de contraste de cor
Verifique os rácios de contraste WCAG AA/AAA entre o texto e a cor de fundo.
Novo Gerador de gradientes CSS
Crie gradientes CSS lineares, radiais e cónicos com pré-visualização ao vivo.
Novo Gerador de box-shadow CSS
Crie box-shadows CSS de várias camadas com predefinições e pré-visualização ao vivo. Copie o CSS, o valor ou o estilo React num instante.
Novo Gerador de paletas de cores
Gere paletas complementares, análogas, triádicas e monocromáticas.
Novo Gerador de cubic-bezier
Desenhe uma curva de easing CSS arrastando pontos de controlo, com pré-visualização ao vivo.
Novo Gerador de border-radius
Crie visualmente cantos arredondados em CSS e formas orgânicas tipo blob.