Design / CSS

Gerador de CSS Glassmorphism (efeito de vidro fosco)

Crie o visual de vidro fosco com CSS backdrop-filter: ajuste o desfoque, a cor da tonalidade, a opacidade, a saturação, a borda e o raio dos cantos sobre uma prévia colorida e copie um CSS compatível com todos os navegadores atuais.

Gerador de CSS Glassmorphism (efeito de vidro fosco): backdrop-filter: blur() desfoca o que estiver atrás do elemento, enquanto saturate() deixa essas cores mais intensas. Um fundo semitransparente dá tonalidade ao vidro, e uma borda clara e discreta destaca a borda, como acontece no vidro real. A linha com o prefixo -webkit- oferece suporte ao Safari anterior à versão 18. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria
Ferramentas para desenvolvedores
Execuções
No seu navegador
Custo
Grátis · sem cadastro
Disponibilidade
Pronto para usar
Gerador de glassmorphismProcessamento local

Roda inteiramente no seu navegador

Vidro foscoAs cores atrás deste cartão estão desfocadas.

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

O efeito precisa de algo colorido atrás do elemento: backdrop-filter desfoca o que estiver por baixo, e o fundo semitransparente permite que isso apareça. A linha -webkit- é para o Safari anterior à versão 18. Verifique se o texto no vidro mantém contraste suficiente em todas as partes do fundo.

Acessibilidade

Algumas pessoas ativam a transparência reduzida nas configurações do sistema. A media query prefers-reduced-transparency, compatível com navegadores baseados em Chromium, pode trocar o vidro por um fundo sólido para essas pessoas.

Combinação com uma sombra

Uma sombra suave e ampla destaca o cartão do fundo; ajuste-a com o gerador de sombra de caixa e substitua a linha box-shadow.

Como usar

  1. Defina o desfoque, a opacidade e a saturação.
  2. Escolha a tonalidade, a borda e o raio dos cantos.
  3. Copie o CSS e coloque o elemento sobre um fundo colorido.

Privacidade e limitações

Tudo é executado no seu navegador.

Ferramentas relacionadas

Box ShadowGradiente CSSpadrão CSS

Perguntas frequentes

Por que meu vidro parece sem graça?

É preciso haver algo colorido ou detalhado atrás dele; sobre uma cor uniforme, não há nada para desfocar.

backdrop-filter é lento?

Ele consome mais recursos do que a maioria das propriedades CSS, especialmente quando áreas grandes rolam sobre conteúdo em movimento; mantenha as áreas desfocadas pequenas e evite empilhar muitas delas.

O texto fica legível?

Verifique o resultado: o contraste muda conforme o fundo. Uma tonalidade mais escura, mais opacidade ou uma sombra no texto ajudam.

Ferramenta grátis · no seu navegador execuções · não precisa de conta