devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Gerador de CSS Glassmorphism (backdrop-filter)

Monte um card de vidro fosco com sliders em tempo real e copie o CSS compatível com todos os navegadores — com o prefixo -webkit-backdrop-filter e um fallback para navegadores mais antigos.

Atualizado em
Vidro fosco
backdrop-filter desfoca o que estiver atrás deste card.

CSS



Classes Tailwind

    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: Gerador de Glassmorphism
  1. Ajuste o blur, a saturação e a opacidade do fundo até o card ficar do jeito que você quer sobre o fundo de exemplo.
  2. Troque o fundo da prévia para conferir a legibilidade em imagens com muitos detalhes ou em designs escuros.
  3. Copie o CSS (com prefixo e fallback) ou as classes Tailwind com valores arbitrários.
  4. Lembre-se: o efeito só aparece quando há algo colorido atrás do elemento.


O que é glassmorphism?


Glassmorphism é o visual de vidro fosco popularizado pelo macOS e pelo Windows 11: um painel semitransparente que desfoca o que está atrás dele, normalmente com uma borda clara e fina e uma sombra suave. Em CSS, ele é criado com backdrop-filter: blur() somado a uma cor de fundo translúcida.


O CSS explicado


    

  • background: rgba(255,255,255,.18) — o tom do vidro. Se for opaco demais, o blur some; se for transparente demais, o texto fica difícil de ler.
    • 

  • backdrop-filter: blur(12px) saturate(160%) — desfoca e aumenta um pouco as cores atrás do elemento, o que evita que o vidro pareça cinza.
    • 

  • -webkit-backdrop-filter — o Safari ainda precisa do prefixo para um suporte confiável, e é a linha que os desenvolvedores mais esquecem.
    • 

  • Uma borda branca de 1px semitransparente define a borda do vidro.
    • 



Performance e acessibilidade


O backdrop blur exige bastante da GPU: evite áreas grandes com blur que sejam animadas ou que fiquem sobre vídeos, e teste a rolagem em celulares de entrada. Sempre verifique o contraste do texto sobre a parte mais exigente do fundo com o Verificador de Contraste, e mantenha a regra de fallback para que navegadores sem suporte recebam um fundo legível e mais opaco.


No Webflow


O painel de Style do Webflow tem a opção Backdrop filters em Effects — adicione Blur (e Saturate) ali, defina a cor de fundo com alpha, e o Webflow gera o CSS necessário.
Também pesquisado como: glassmorphism css, backdrop-filter, efeito vidro fosco, blur de fundo css, efeito glassmorphism, webkit-backdrop-filter, gerador glassmorphism, vidro fosco css.
Ferramentas que combinam com: Gerador de Glassmorphism
  • Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
  • Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
  • Gerador de Valores Arbitrários Tailwind — Cole seu CSS e acerte a sintaxe de colchetes do Tailwind de primeira — espaços viram underscores, dicas de tipo são adicionadas e propriedades não suportadas viram propriedades arbitrárias.
  • Conversor HEX para RGBA — Cole um código HEX, arraste o slider de opacidade e copie o CSS exato que você precisa: rgba() tradicional, rgb( / alpha) moderno ou HEX de 8 dígitos.
Perguntas frequentes
Por que o backdrop-filter não funciona?
O fundo do elemento precisa ser pelo menos parcialmente transparente e deve haver conteúdo visível atrás dele. Também verifique se algum elemento pai não cria um novo contexto de empilhamento que esconda o conteúdo, e inclua o prefixo -webkit- para o Safari.
O backdrop-filter é suportado em todos os navegadores?
Todas as versões atuais do Chrome, Edge, Firefox e Safari suportam (no Safari, em versões mais antigas, via prefixo). O fallback gerado cobre qualquer outro caso.
Qual é a diferença entre filter: blur e backdrop-filter: blur?
filter desfoca o próprio elemento, incluindo o texto. backdrop-filter desfoca apenas o que está atrás do elemento, mantendo o conteúdo nítido.
Como adicionar glassmorphism no Webflow?
Selecione o elemento, abra Style → Effects → Backdrop filters, adicione Blur e defina uma cor de fundo com transparência.
Posso instalar o Gerador de Glassmorphism como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Glassmorphism é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localGerador de Box ShadowEmpilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao…localGerador de Gradiente CSSMonte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma…localVerificador de ContrasteInforme uma cor de texto e uma cor de fundo para obter a razão de contraste WCAG exata, o resultado de…localGerador de Valores Arbitrários TailwindCole seu CSS e acerte a sintaxe de colchetes do Tailwind de primeira — espaços viram underscores, dicas de…localConversor HEX para RGBACole um código HEX, arraste o slider de opacidade e copie o CSS exato que você precisa: rgba()…localGerador de Animação CSSCrie animações CSS em uma linha do tempo de keyframes real. Comece com mais de 50 presets, navegue quadro…