Gerador de glassmorphism
NovoCrie um cartão de vidro fosco e copie o CSS, com prévia 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 sem escrever CSS na mão
Este gerador de glassmorphism permite que você monte o visual de vidro fosco de forma visual — arraste os sliders de blur, transparência, tom de cor, saturação, borda e sombra e veja um card de vidro ao vivo responder instantaneamente. Quando estiver do jeito que você quer, copie o CSS exato (com o fallback -webkit-), as classes Tailwind equivalentes, ou um snippet HTML pronto para colar. Chega de adivinhar valores de backdrop-filter e sem nada para instalar — tudo roda no seu navegador.
O glassmorphism é o estilo de interface translúcida e fosca popularizado pelo macOS, pelo Windows 11 e por inúmeros dashboards modernos. Ele adiciona profundidade e sofisticação a cards, modais, navbars e formulários de login, mantendo o fundo colorido visível através da superfície. Acertar esses valores na mão significa ciclos intermináveis de salvar e recarregar; essa ferramenta deixa você pular tudo isso.
Como o efeito de vidro fosco funciona
Três propriedades CSS criam o efeito. Um fundo semitransparente como rgba(255,255,255,0.18) deixa o conteúdo aparecer por baixo. Um backdrop blur — backdrop-filter: blur(10px) — fosca tudo que está atrás do elemento, não o conteúdo próprio dele. E uma borda fina como 1px solid rgba(255,255,255,0.3) captura a luz na borda. Adicione um box-shadow suave e um border-radius generoso e o painel passa a parecer um painel de vidro.
A saturação também importa: encadear saturate(120%) no blur intensifica a cor que vaza pela superfície, dando ao vidro premium aquele visual vívido e luminoso. Essa ferramenta expõe todos esses controles — raio do blur, cor do tom, opacidade do tom, saturação, largura da borda, opacidade da borda, border-radius e intensidade da sombra — para que você afine o CSS de vidro fosco com precisão sem editar uma linha de código.
Saída em CSS e Tailwind, lado a lado
Alterne as abas de saída para obter o efeito como CSS puro, como classes Tailwind glassmorphism, ou como um snippet HTML + <style> completo pronto para colar. A saída CSS sempre inclui o prefixo -webkit-backdrop-filter para cobrir o 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 sliders — útil se você prefere CSS escrito à mão ou um fluxo de trabalho utility-first.
Essa saída dupla é uma das maiores lacunas das ferramentas concorrentes. O Glassmorphism.com e o Glass UI exportam apenas CSS puro, deixando os usuários do Tailwind traduzindo valores manualmente. O UtiloKit faz os dois automaticamente, então você copia direto para o seu código, seja qual for o stack.
Prévia sobre o seu próprio fundo
Vidro só parece vidro quando tem algo colorido atrás, então a prévia ao vivo fica sobre um fundo que você controla. Escolha entre presets de gradiente — pôr do sol, oceano, aurora, vibrante e uma cena escura — ou faça upload da sua própria imagem para testar o vidro sobre exatamente a foto ou hero que você vai usar. É isso que torna a prévia do fundo glassmorphism realista em vez de um swatchão genérico, e permite verificar o contraste do texto na parte mais colorida da cena.
O upload de fundo personalizado é uma funcionalidade que o glassmorphism.com notoriamente não tem. Quando você está criando um overlay de vidro para uma foto hero específica, testar contra um gradiente genérico não dá uma leitura confiável de legibilidade. Colocar a sua imagem real permite detectar problemas de contraste antes que cheguem à produção.
Como o UtiloKit se compara a outros geradores de glassmorphism
A maioria das alternativas oferece um snippet CSS básico com um único fundo. O Glassmorphism.com (o popular do Michal Malewicz) não tem saída Tailwind, upload de fundo personalizado nem link compartilhável para revisão em equipe. O Glass UI (glass-ui.com) é igualmente limitado — não expõe saturação, intensidade de box-shadow nem cor do tom de forma independente. Os tutoriais do CSS-tricks e os snippets do Codepen entregam código estático que você precisa modificar à mão toda vez que o designer muda a spec.
O UtiloKit coloca todos os controles em uma tela só: blur, cor do tom, opacidade do tom, saturação, largura da borda, opacidade da borda, border-radius e box-shadow. O link de compartilhamento bota todos esses valores na URL para que você passe a especificação exata para um colega. Sem conta, sem upload, sem marca d'água — só copiar e publicar.
Presets, suporte a navegadores e legibilidade
Quatro presets de um clique — Card fosco, Vidro escuro, Navbar e Vibrante — oferecem um ponto de partida sólido que você pode refinar depois. O CSS gerado sempre inclui o prefixo -webkit-backdrop-filter, então o efeito funciona no Chrome, Edge, Firefox e Safari, e degrada graciosamente para um preenchimento translúcido simples em navegadores sem suporte.
Como a transparência muda o contraste, fique de olho na legibilidade: aumente a opacidade do tom para cerca de 25–40%, adicione saturação para acalmar fundos muito coloridos e mire em uma proporção de contraste de texto WCAG 4.5:1. Um card de vidro deve parecer leve e arejado, mas o texto nunca deve ser difícil de ler. Se o texto ficar difícil de ler na prévia ao vivo, esse é o seu sinal para aumentar a opacidade do tom antes de publicar.
Privado, instantâneo e grátis
Sem cadastro e nada para instalar. Cada valor que você ajusta, a prévia ao vivo e qualquer imagem que você adicionar são processados localmente no seu navegador — nada é enviado para um servidor. Compartilhe uma configuração com um colega usando o botão Copiar link, que embute todas as suas configurações na URL. Adicione este gerador de card de vidro aos favoritos e use sempre que precisar de um efeito de vidro fosco sem a fricção de uma ferramenta que pede seu e-mail primeiro.
Frequently asked questions
O que é glassmorphism?
Glassmorphism é um estilo de interface que faz um elemento parecer vidro fosco — um painel semitransparente que desfoca tudo que está atrás dele, finalizado com uma borda fina e clara e uma sombra suave para dar profundidade. Você o vê no macOS Big Sur, nas superfícies acrílicas do Windows 11 e em cards de login modernos. Os três ingredientes são um preenchimento de fundo translúcido, um backdrop blur e uma borda sutil de 1px, ex.: background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3).
Como criar efeito glassmorphism em CSS?
Dê ao elemento um fundo semitransparente 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). O segredo é que o fundo seja parcialmente transparente para o blur aparecer por baixo. Arraste os sliders acima para ajustar com precisão e copie o CSS exato.
O que o backdrop-filter faz no CSS?
O backdrop-filter aplica um efeito gráfico — mais comumente blur() — na área atrás de um elemento, não ao conteúdo próprio do elemento. Então backdrop-filter: blur(10px) desfoca tudo que é renderizado atrás da caixa, criando o visual de vidro fosco. Você também pode encadear filtros, ex.: backdrop-filter: blur(10px) saturate(150%) para desfocar e intensificar a cor atrás do vidro ao mesmo tempo. Só funciona se o próprio fundo do elemento for ao menos parcialmente transparente.
Como fazer efeito de vidro fosco no CSS?
O vidro fosco é glassmorphism com um blur mais intenso e um tom 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 tom para cerca de 20–30% para que a superfície pareça 'fosca' em vez de transparente. O preset 'Card fosco' do UtiloKit define esses valores para você instantaneamente, então você pode começar daí e ajustar.
O backdrop-filter funciona em todos os navegadores?
Sim — o backdrop-filter é suportado em todos os principais navegadores atuais (Chrome, Edge, Firefox e Safari). O Safari já tem suporte há anos pelo prefixo -webkit-backdrop-filter, então sempre inclua as duas linhas: -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px). O gerador de glassmorphism do UtiloKit já emite a versão prefixada automaticamente. Navegadores muito antigos que não suportam simplesmente exibem seu fundo semitransparente simples, degradando de forma elegante.
Por que meu backdrop-filter / glassmorphism não está funcionando?
As três causas mais comuns: (1) não há nada atrás do elemento para desfocar — o backdrop-filter só afeta o conteúdo renderizado atrás dele, então coloque-o sobre uma imagem ou gradiente; (2) o próprio fundo do elemento é completamente opaco — use um preenchimento rgba() como rgba(255,255,255,0.18) para o blur aparecer; (3) você esqueceu o prefixo -webkit-backdrop-filter para o Safari. Note também que um ancestral com filter, transform ou will-change pode criar um bloco contendo que quebra o efeito completamente.
Como usar glassmorphism no Tailwind CSS?
Combine os utilitários backdrop-blur com um fundo translúcido e uma borda discreta. 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 atrás. Para valores exatos, mude a saída acima para a aba Tailwind — ela 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 sliders.
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 flutuando sobre o conteúdo. O neumorphism (soft UI) é o oposto: elementos opacos da mesma cor da página, com um visual 3D extrudado criado por sombras claras e escuras pareadas — 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 e de uma única cor para funcionar.
Qual intensidade de blur devo usar no glassmorphism?
Para a maioria dos cards, um backdrop blur de 8–16px funciona bem. Use cerca de 5–8px para um vidro leve e quase transparente, 10–16px para um card ou modal típico, e 16–25px para uma navbar ou overlay de vidro fosco intenso. Combine mais blur com uma opacidade de tom ligeiramente maior para o texto continuar legível. O slider de Blur acima vai de 0 a 40px para você encontrar o ponto ideal para a sua imagem de fundo específica sem precisar adivinhar.
Como manter o texto legível em um card de vidro?
A legibilidade vem do contraste entre o texto e o fundo desfocado. Aumente a opacidade do tom para cerca de 25–40% para a superfície ser menos transparente, adicione backdrop-saturate para suavizar cores muito vivas por baixo, e escolha uma cor de texto com contraste forte — texto branco em vidro com tom escuro, ou texto escuro em tom claro. Mire na proporção de contraste WCAG 4.5:1 para texto corrido, e evite colocar texto pequeno sobre a parte mais colorida da imagem de fundo.
O glassmorphism é acessível?
Pode ser, mas exige cuidado. A transparência torna o contraste imprevisível porque a cor atrás do vidro fica sempre mudando, o que pode fazer o texto cair abaixo do mínimo WCAG de 4.5:1. Use uma opacidade de tom suficientemente alta (30%+), teste o texto na parte mais colorida do fundo, e não confie apenas no blur para separar o conteúdo. Respeite também os usuários que definem prefers-reduced-transparency fornecendo um fallback mais opaco no seu CSS.
Como o gerador de glassmorphism do UtiloKit se compara ao glassmorphism.com e ao Glass UI?
O Glassmorphism.com (do Michal Malewicz) é um bom ponto de partida rápido para um estilo, mas não permite upload de imagem própria, controle de saturação nem exportação de classes Tailwind. O Glass UI (glass-ui.com) tem limitações parecidas — prévia com fundo único, sem saída Tailwind, sem link compartilhável. O UtiloKit deixa você soltar sua própria imagem, ajustar todos os parâmetros incluindo saturação e intensidade de sombra, obter saída em CSS e Tailwind, e compartilhar a configuração exata via URL. Tudo roda no navegador sem upload para nenhum servidor.
Como adicionar um card de vidro ao meu site?
Coloque um container sobre uma imagem de fundo ou gradiente, depois aplique o CSS gerado ao card. Exemplo mínimo: dê ao elemento pai um background, 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 snippet HTML pronto da saída acima — ele inclui a marcação e um bloco de estilo que você pode colar direto na sua página sem nenhuma configuração extra.
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 navegador móvel moderno. Os sliders são amigáveis ao toque, a prévia ao vivo atualiza em tempo real, e copiar a saída em CSS ou Tailwind funciona pelo clipboard do celular assim como no desktop. Como tudo roda no navegador sem nenhum servidor envolvido, não há nada para instalar — basta abrir a página e começar a criar.
Posso compartilhar minha configuração de glassmorphism com um colega?
Sim — clique no botão Copiar link e todos os valores dos seus sliders são codificados diretamente na URL. Compartilhe esse link com um designer ou desenvolvedor e ele abre a sua configuração exata: mesmo blur, mesma cor e opacidade do tom, mesma saturação, mesmas configurações de borda e sombra. Sem conta necessária, sem arquivo para exportar. Esse é um ponto em que glassmorphism.com e Glass UI ficam atrás — nenhum dos dois suporta links de configuração compartilhável.
Related tools
Ver todas as ferramentas
Novo Verificador de contraste de cores
Verifique as razões de contraste WCAG AA/AAA entre as cores de texto e fundo.
Novo Gerador de gradientes CSS
Crie gradientes CSS lineares, radiais e cônicos com prévia ao vivo.
Novo Gerador de box-shadow CSS
Crie box-shadows CSS em várias camadas com predefinições e prévia ao vivo. Copie o CSS, o valor ou o estilo React na hora.
Novo Gerador de paleta de cores
Gere paletas complementares, análogas, triádicas e monocromáticas.
Novo Gerador de curva cubic-bezier
Crie uma curva de easing CSS arrastando os pontos de controle, com prévia ao vivo.
Novo Gerador de border-radius
Crie visualmente cantos arredondados CSS e formas orgânicas tipo blob.