Gerador de Glassmorfismo
Crie efeitos CSS glassmorphism com controles visuais. Ajuste opacidade, desfoque e saturacao para UI de vidro fosco.
Principais recursos
- Opacidade, desfoque e saturação ajustáveis
- Seleção personalizada de cor de tonalidade
- Pré-visualização ao vivo sobre fundos em gradiente
- Saída CSS pronta para copiar
Guide
Glassmorphism é um estilo de design visual onde elementos de interface aparecem como painéis de vidro fosco flutuando sobre um fundo colorido. O efeito depende de três propriedades CSS trabalhando juntas: transparência de fundo (rgba ou hsla com alfa baixo), desfoque de fundo (backdrop-filter: blur()) e uma borda ou sombra sutil que define a borda do painel. O estilo ganhou destaque em 2020 com o macOS Big Sur da Apple e desde então tornou-se um elemento básico no design moderno de interface web e móvel. Este guia cobre a implementação técnica, implicações de desempenho, princípios de design e padrões práticos para usar glassmorphism de forma eficaz. O CSS central de um painel glassmorphism exige três declarações. Primeiro, um fundo semitransparente: background: rgba(255, 255, 255, 0,15) para um efeito de vidro claro ou background: rgba(0, 0, 0, 0,25) para um efeito de vidro escuro. Segundo, um desfoque de fundo: backdrop-filter: blur(12px). Terceiro, uma borda que captura luz: border: 1px solid rgba(255, 255, 255, 0,2). A combinação de fundo transparente, fundo desfocado e borda luminosa cria a ilusão de vidro fosco. Sem qualquer um desses três componentes, o efeito falha. Um fundo transparente sem desfoque parece uma sobreposição colorida. Desfoque sem transparência não mostra nada atrás do elemento. E sem borda, as bordas do painel desaparecem no fundo. A propriedade backdrop-filter aplica efeitos gráficos à área atrás de um elemento. Ela suporta as mesmas funções de filtro que a propriedade filter do CSS: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() e drop-shadow(). Para glassmorphism, blur() é a função principal. O raio de desfoque controla a intensidade do efeito fosco: blur(4px) cria uma suavidade sutil, blur(12px) cria uma fosca média e blur(24px) cria uma fosca pesada onde os detalhes do fundo são quase invisíveis. Você pode combinar múltiplas funções: backdrop-filter: blur(12px) saturate(180%) adiciona vivacidade de cor ao fundo desfocado, fazendo as cores atrás do vidro parecerem mais vívidas. O valor do raio de desfoque determina quão vidrado versus sólido o painel parece. Valores mais baixos (4px a 8px) mantêm mais detalhes do fundo e parecem mais leves. Valores médios (10px a 16px) criam o visual clássico de vidro fosco. Valores mais altos (20px+) obscurecem o fundo quase inteiramente, ponto em que você perde a metáfora do vidro e o painel parece uma superfície translúcida sólida. Para a maioria das aplicações de interface, 8px a 16px atinge o equilíbrio certo entre interesse visual e legibilidade do conteúdo. Teste o raio de desfoque escolhido com seu conteúdo de fundo real para verificar se o efeito funciona como pretendido. O alfa do fundo (transparência) trabalha em tensão com o raio de desfoque. Um fundo com alfa muito baixo (0,05 a 0,10) mostra mais do fundo desfocado, criando uma sensação mais leve e transparente. Um fundo com alfa mais alto (0,25 a 0,40) obscurece mais do fundo, criando uma sensação mais sólida e opaca. A combinação certa depende do que está atrás do painel de vidro. Sobre um fundo movimentado e colorido, alfa mais alto e desfoque mais forte garantem que o texto permaneça legível. Sobre um fundo simples e suave, alfa mais baixo e desfoque mais leve criam um efeito mais elegante. Não há uma única combinação correta. Cada contexto de design exige testes para encontrar o equilíbrio entre efeito visual e usabilidade. Borda e sombra definem a borda do painel de vidro e são essenciais para a ilusão funcionar. Sem borda, o painel se mistura com seus arredores e perde sua qualidade dimensional. Uma borda fina usando rgba(255, 255, 255, 0,18) em um painel de vidro claro ou rgba(255, 255, 255, 0,08) em um painel de vidro escuro simula luz capturando a borda do vidro real. Box-shadow adiciona profundidade: box-shadow: 0 8px 32px rgba(0, 0, 0, 0,12) para uma sombra leve ou box-shadow: 0 8px 32px rgba(0, 0, 0, 0,37) para elevação mais dramática. A sombra reforça que o painel flutua acima do fundo. Algumas implementações adicionam uma segunda sombra interna para dimensão adicional. O desempenho do backdrop-filter é a consideração mais importante para uso em produção. O desfoque de fundo é intensivo em GPU porque o navegador deve renderizar o conteúdo atrás do elemento, aplicar o filtro de desfoque a esse conteúdo renderizado e depois compor o resultado desfocado sob o elemento semitransparente. Isso acontece a cada quadro se algo atrás do painel de vidro mudar (rolagem, animações, vídeo). Em GPUs desktop de alto desempenho, isso é suave. Em dispositivos móveis de baixo custo, pode causar quedas significativas de quadros e drenagem de bateria. O custo de desempenho escala com o raio de desfoque e a área sendo desfocada. Um pequeno cartão de vidro com blur(8px) é muito mais barato do que uma barra de navegação de vidro de largura total com blur(20px). Estratégias de otimização de desempenho incluem limitar o número de elementos de vidro visíveis ao mesmo tempo (evite colocar painéis de vidro em todos os cartões em uma grade de 50 itens), reduzir o raio de desfoque em mobile (blur(8px) em vez de blur(20px) em telas menores), evitar efeitos de vidro sobre fundos animados ou de vídeo em mobile e usar will-change: backdrop-filter como uma dica para o navegador preparar recursos de GPU. Você também pode usar a propriedade contain: paint no elemento de vidro para limitar o escopo de composição. Teste em dispositivos de baixo custo reais, não apenas na sua máquina de desenvolvimento. Um efeito de vidro que tem bom desempenho em um MacBook Pro pode gaguejar em um telefone Android econômico com uma GPU Adreno 505. O suporte do navegador para backdrop-filter agora é amplo. Chrome, Edge, Safari e Firefox todos o suportam. O prefixo -webkit- (-webkit-backdrop-filter) ainda é necessário para versões do Safari anteriores à 18. O Internet Explorer não o suporta. Para navegadores sem suporte, o fallback é um fundo semitransparente sólido sem desfoque. Defina isso como padrão e adicione o desfoque por cima: background: rgba(255, 255, 255, 0,7) como fallback (mais opaco para manter a legibilidade sem desfoque), depois @supports (backdrop-filter: blur(1px)) { background: rgba(255, 255, 255, 0,15); backdrop-filter: blur(12px); } para navegadores capazes. O fallback mantém a usabilidade ao custo do efeito de vidro. Um snippet CSS completo de glassmorphism fica assim. Para os estilos base: background: rgba(255, 255, 255, 0,7) como fallback para navegadores sem suporte a backdrop-filter. Depois dentro de um bloco @supports: background: rgba(255, 255, 255, 0,15), seguido por backdrop-filter: blur(12px) e -webkit-backdrop-filter: blur(12px). Fora do bloco @supports, adicione border: 1px solid rgba(255, 255, 255, 0,2), box-shadow: 0 8px 32px rgba(0, 0, 0, 0,1) e border-radius: 16px. Esse padrão cobre todos os navegadores com degradação graciosa. A temperatura de cor do efeito de vidro define o clima. Vidro quente usa fundos ligeiramente tingidos: rgba(255, 200, 150, 0,15) adiciona um tom âmbar quente. Vidro frio usa tons de azul: rgba(100, 150, 255, 0,15). Vidro neutro usa branco ou preto em várias opacidades. O tom interage com quaisquer cores que estejam atrás do vidro, então a cor percebida muda conforme o fundo muda. Essa qualidade dinâmica é parte do que faz o glassmorphism parecer vivo e responsivo ao contexto. Para vidro com cor de marca, use sua cor de marca em alfa muito baixo (0,05 a 0,15) para manter o efeito translúcido enquanto reforça a identidade da marca. Glassmorphism em modo escuro inverte a abordagem. Em vez de vidro claro sobre um fundo colorido, use vidro escuro (rgba(0, 0, 0, 0,40) ou rgba(17, 25, 40, 0,60)) com uma borda mais clara (rgba(255, 255, 255, 0,08)). O desfoque de fundo funciona da mesma forma. Painéis de vidro escuro parecem sofisticados sobre fundos escuros com gradientes de cor sutis ou efeitos de luz ambiente. A Central de Controle da Apple no iOS é um exemplo canônico de glassmorphism escuro. Para o modo escuro, a mudança de cor da borda é importante: mude de bordas brancas para versões ligeiramente mais claras do fundo escuro para manter a borda do vidro sem que a borda pareça muito brilhante. A legibilidade do texto em painéis de vidro exige atenção cuidadosa porque é onde o glassmorphism costuma falhar mais. O fundo semitransparente e desfocado significa que a cor de fundo efetiva muda dependendo do que está atrás do painel. Texto branco pode ser legível quando o painel está sobre uma área escura do fundo, mas ilegível quando se move sobre uma área clara (durante a rolagem, por exemplo). Soluções incluem usar alfa de fundo mais alto para garantir um contraste mínimo independentemente do que está atrás, adicionar text-shadow para separação extra (text-shadow: 0 1px 2px rgba(0, 0, 0, 0,3)), usar pesos de fonte mais pesados (600 ou 700 em vez de 400) e garantir que o fundo atrás dos painéis de vidro seja controlado e não muito variado em brilho. Vidro em camadas cria profundidade empilhando múltiplos painéis de vidro com diferentes níveis de desfoque e opacidades. Uma camada de vidro de fundo com desfoque pesado e baixa opacidade fica atrás de um painel de vidro de primeiro plano com desfoque mais leve e opacidade ligeiramente mais alta. Isso cria uma sensação de profundidade e hierarquia. A Apple usa isso extensivamente no macOS e iOS. Implemente com camadas de z-index: a camada de fundo tem um raio de desfoque mais alto (blur(20px)) e a camada de primeiro plano tem um raio de desfoque mais baixo (blur(8px)) com ligeiramente mais opacidade. Três ou mais camadas é possível, mas raro, e cada camada adiciona ao custo de renderização. Glassmorphism funciona melhor para padrões específicos de interface: barras de navegação flutuando sobre conteúdo, diálogos modais e sobreposições, painéis de notificação, barras laterais, elementos de cartão sobre seções de destaque, controles de player de mídia sobre arte de álbum, elementos de tooltip e popover e widgets de dashboard sobre visualizações de dados. Funciona mal para áreas de conteúdo densas (texto de artigo, tabelas de dados, formulários com muitos campos) onde o fundo cambiante atrás do vidro distrai do conteúdo. Use efeitos de vidro como destaques, não como o tratamento de superfície padrão para tudo na página. O fundo atrás do painel de vidro importa tanto quanto o próprio vidro. Glassmorphism fica melhor sobre fundos coloridos e em gradiente com transições suaves. Um gradiente de roxo profundo a azul oceano, ou de laranja quente a rosa, fornece o pano de fundo ideal para o efeito de desfoque. O painel de vidro suaviza e difunde essas cores lindamente. Sobre um fundo branco simples ou preto simples, o efeito de vidro é invisível porque não há nada para desfocar. Sobre um fundo fotográfico movimentado com detalhes nítidos, o desfoque produz um resultado lamacento. Projete seu fundo e seus painéis de vidro juntos como um sistema. Combinar glassmorphism com outros elementos de design aprimora o efeito. Gradientes sutis no fundo do painel de vidro (um linear-gradient de rgba(255,255,255,0,2) a rgba(255,255,255,0,05)) adicionam luz direcional. Sombras internas (box-shadow: inset 0 1px 0 rgba(255,255,255,0,2)) simulam luz atingindo a borda superior do vidro. Border-radius suaviza o painel (16px a 24px é comum em designs glassmorphism). Juntos, esses detalhes fazem o vidro parecer mais físico e tridimensional. Animação com elementos de vidro deve ser suave e proposital. Faça painéis de vidro aparecerem com transições de opacidade. Deslize-os para a posição com transformações translate. Evite animar o valor de desfoque do backdrop-filter em si, pois mudar o raio de desfoque a cada quadro força o navegador a regenerar o fundo desfocado, o que é extremamente caro. Se você precisa de uma animação de desfoque, considere animar uma camada de fundo desfocada separada usando CSS filter: blur() em um pseudo-elemento, que é mais fácil para os navegadores otimizarem do que backdrop-filter. Animações de transform e opacidade em elementos de vidro têm bom desempenho porque não exigem recalcular o desfoque. Integração de glassmorphism em sistema de design exige definir um conjunto de tokens de vidro: cores de fundo de vidro em opacidades claras e escuras, cores de borda de vidro, valores de sombra de vidro e raios de desfoque de vidro para diferentes contextos. Crie classes CSS reutilizáveis ou variantes de componente: .glass-light, .glass-dark, .glass-subtle, .glass-prominent. Documente quais variantes de vidro funcionam em quais tipos de fundo. Isso evita a inconsistência de valores de vidro ad hoc por todo o código e garante que o efeito degrada consistentemente em navegadores sem suporte. Glassmorphism em React, Vue e outros frameworks de componente tipicamente é implementado como um componente reutilizável ou uma classe utilitária CSS. Em React, um componente GlassPanel aceita props para intensidade de desfoque, opacidade, cor de tom e visibilidade de borda, renderizando uma div com os estilos computados. O Tailwind CSS torna o glassmorphism direto com classes utilitárias: bg-white/15 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg. Implementação em nível de componente garante efeitos de vidro consistentes em todo o aplicativo e fornece um único lugar para atualizar o efeito quando os requisitos de design mudam. Preocupações de acessibilidade com glassmorphism centram-se na legibilidade do texto e na sensibilidade ao movimento. Como discutido, o fundo cambiante atrás dos painéis de vidro pode tornar o texto difícil de ler. Além disso, o próprio efeito de desfoque é um efeito visual que alguns usuários com distúrbios vestibulares podem achar desorientador, especialmente quando painéis de vidro rolam sobre fundos em mudança. Respeite as media queries prefers-reduced-transparency e prefers-reduced-motion. Para usuários que preferem transparência reduzida, faça fallback para um fundo opaco sólido. Para usuários que preferem movimento reduzido, evite animar painéis de vidro. Glassmorphism em comparação com outras tendências de design ocupa um nicho específico. Neumorphism (soft UI) usa sombras sutis para criar efeitos elevados e pressionados em fundos da mesma cor. Ele sofre de contraste ruim e problemas de acessibilidade. Flat design usa cores sólidas sem efeitos de profundidade. Material Design usa elevação e sombras em superfícies opacas. Glassmorphism fica entre flat design e material design, adicionando profundidade através de transparência em vez de apenas sombra. Funciona melhor como um estilo de destaque. Um aplicativo inteiro em glassmorphism torna-se visualmente ruidoso. Uso seletivo (navegação, modais, cartões destacados) cria interesse visual sem sobrecarregar o usuário. Exemplos do mundo real de implementações glassmorphism fornecem pontos de referência. A Apple usa glassmorphism extensivamente no macOS (barra de menu, barras laterais, central de notificações) e iOS (Central de Controle, widgets, alternador de aplicativos). A Microsoft usa o material Acrylic no Windows 11 (menu Iniciar, barra de tarefas, painéis de configurações), que é uma variação de glassmorphism com uma sobreposição de textura de ruído. Essas implementações demonstram que o glassmorphism funciona melhor quando o sistema operacional ou aplicativo controla o conteúdo de fundo, garantindo um nível consistente de desfoque e contraste. Na web, onde você controla tanto o fundo quanto os painéis de vidro, você tem o mesmo nível de controle. Sobreposição de textura de ruído adiciona um grão sutil aos painéis de vidro que os faz parecer mais com vidro fosco físico real. Vidro fosco real tem uma textura ligeiramente áspera, não um desfoque perfeitamente suave. Você pode adicionar essa textura com um pseudo-elemento usando um PNG de ruído ou filtro SVG em opacidade muito baixa (2 a 5 por cento). O ruído impede que o vidro pareça digitalmente limpo demais. O material Acrylic da Microsoft usa essa técnica. Implementação: adicione um pseudo-elemento ::before com uma pequena imagem de ruído em ladrilhos como fundo, position absolute para preencher o painel e defina opacity para 0,03 a 0,05. Glassmorphism na rolagem exige implementação cuidadosa. Uma barra de navegação de vidro fixa sobre conteúdo em rolagem cria um efeito de desfoque constantemente cambiante conforme diferentes conteúdos passam atrás dela. Isso parece ótimo, mas é intensivo em desempenho porque o backdrop-filter deve ser recalculado a cada quadro durante a rolagem. Para páginas longas com desfoque pesado baseado em rolagem, considere usar um efeito mais simples em mobile (fundo semitransparente sólido) e reservar o efeito de vidro completo para desktop onde a potência da GPU tipicamente é suficiente. Testar glassmorphism em diferentes tipos de conteúdo atrás do vidro revela quão robusta é sua implementação. Teste com conteúdo de texto, imagens, vídeos, cores sólidas, gradientes e conteúdo misto passando atrás do painel de vidro. Cada tipo de conteúdo produz diferentes resultados de desfoque. Texto denso atrás do vidro cria um desfoque cinza. Imagens coloridas criam cores vívidas e cambiante. Vídeo cria desfoque constantemente em mudança. Seu painel de vidro precisa manter legibilidade do texto e apelo visual em todos esses cenários, ou você precisa restringir qual conteúdo pode aparecer atrás dos elementos de vidro. Glassmorphism combinado com padrões de barra lateral fosca cria um layout de aplicativo distinto. Uma barra lateral de vidro sobre a área de conteúdo principal fornece navegação sem obscurecer totalmente o conteúdo. Passar o mouse ou expandir a barra lateral revela mais do efeito de vidro. Esse padrão funciona bem para dashboards e painéis administrativos onde a barra lateral é um elemento secundário. Implemente com um elemento de barra lateral fixo ou sticky carregando os estilos de vidro, posicionado sobre a área de conteúdo principal com z-index apropriado. Alternativas apenas em CSS para backdrop-filter existem para navegadores mais antigos ou situações com restrições de desempenho. Um pseudo-elemento (::before) posicionado atrás do conteúdo pode carregar uma cópia desfocada do fundo usando background-attachment: fixed com a mesma imagem de fundo da página, mais um CSS filter: blur(). Essa abordagem não desfoca o conteúdo real atrás do elemento (ela desfoca uma imagem de fundo fixa), então funciona apenas para fundos fixos, não conteúdo dinâmico. Apesar dessa limitação, produz um efeito de vidro convincente com melhor suporte de navegador e desempenho do que backdrop-filter porque o desfoque é aplicado uma vez a uma imagem estática em vez de recalculado a cada quadro. O gerador de glassmorphism permite que você ajuste cor de fundo, opacidade, raio de desfoque, borda e sombra em tempo real enquanto pré-visualiza o resultado sobre um fundo de amostra. Copie o CSS gerado diretamente para sua folha de estilos. Comece com os valores gerados como linha de base, depois refine-os no contexto com seu fundo e conteúdo reais. O gerador cuida da sintaxe incluindo o prefixo -webkit- para compatibilidade com Safari e o fallback @supports para navegadores sem suporte a backdrop-filter.
Perguntas frequentes
O que é glassmorphism?
Glassmorphism é uma tendência de design de interface com elementos translúcidos semelhantes ao vidro fosco, com desfoque de fundo e bordas sutis.
O glassmorphism funciona em todos os navegadores?
A propriedade backdrop-filter é suportada em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.
