Gerador de Glassmorphism em CSS

Esta ferramenta cria um efeito de vidro fosco (glassmorphism) em CSS combinando um fundo semitransparente com backdrop-filter: blur() — arrasta os controlos sobre a pré-visualização colorida para ver o cartão de vidro a desfocar o que está por trás, e copia o CSS. Também gera o prefixo -webkit-backdrop-filter que o Safari continua a exigir.

O que é esta ferramenta?

Glassmorphism é um estilo de interface em que um elemento parece vidro fosco: um fundo semitransparente deixa transparecer as cores por trás, enquanto o backdrop-filter: blur() desfoca esse fundo para que se leia como vidro em vez de um simples painel transparente. Um contorno fino e semitransparente e cantos arredondados costumam completar o efeito.

Esta ferramenta permite construir esse efeito visualmente. A pré-visualização está sobre um fundo em gradiente animado propositadamente, para que o desfoque seja visível — o glassmorphism só se lê corretamente sobre algo com cor ou detalhe atrás, não sobre uma página branca lisa. Ajusta a opacidade da cor de fundo, a intensidade do desfoque, a opacidade do contorno e o raio dos cantos, e copia o CSS gerado.

Fonte: Filter Effects Module Level 1, W3C — define o backdrop-filter, a propriedade em que este efeito se baseia.

Por que usar?

Pré-visualização ao vivo sobre um fundo animado e colorido, para que consigas ver mesmo o efeito de vidro fosco em vez de adivinhar valores de desfoque contra um fundo em branco.
Controlo total sobre a opacidade do fundo, a intensidade do desfoque do backdrop-filter, a opacidade do contorno e o border-radius, tudo num só lugar.
Gera automaticamente o backdrop-filter e o prefixo -webkit-backdrop-filter, para não te esqueceres da compatibilidade com o Safari.
Funciona inteiramente no seu navegador — nada do que você configura é enviado para lado nenhum.
Grátis, sem registo, funciona em celular.

Como usar

Escolhe uma cor de fundo e ajusta a sua opacidade — uma opacidade mais baixa (10–25%) lê-se como vidro; uma opacidade mais alta parece mais um painel sólido colorido.
Aumenta a intensidade do desfoque para desfocar o que está atrás do elemento — é isto que realmente cria o aspeto de vidro fosco, distinto da própria transparência.
Ajusta a opacidade do contorno para acrescentar uma margem clara e subtil, o que ajuda o cartão de vidro a destacar-se como uma superfície própria em vez de se misturar com o fundo.
Define o border-radius para arredondar os cantos — os cartões de glassmorphism são quase sempre arredondados, raramente têm cantos vivos.
Copia o CSS gerado e cola-o na sua folha de estilos. Lembra-te de que o elemento precisa de algo com cor ou textura atrás — o glassmorphism é invisível sobre um fundo liso de uma só cor.

Exemplo

Entrada

Fundo: branco a 20% de opacidade · Desfoque: 10px · Opacidade do contorno: 30% · Raio: 16px

Resultado

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Um estilo clássico de cartão de vidro fosco, usado em painéis de login, barras de navegação e widgets de dashboard sobre um fundo colorido ou fotográfico.

Suporte no Safari e nos navegadores

O backdrop-filter é suportado nas versões atuais do Chrome, Firefox, Edge e Safari, mas o Safari historicamente exigiu o prefixo -webkit-backdrop-filter em conjunto com a propriedade sem prefixo para renderizar o desfoque — sem ele, versões mais antigas do Safari ignoram silenciosamente o desfoque e mostram apenas o fundo transparente liso. Por isso, esta ferramenta gera sempre as duas declarações.

Consulta a documentação do backdrop-filter no MDN para detalhes atuais sobre compatibilidade entre navegadores: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Porque é que o glassmorphism precisa de algo por trás

O backdrop-filter só desfoca o que está visualmente por trás do elemento — uma imagem de fundo, um gradiente, outro elemento colorido ou conteúdo a deslizar por baixo. Sobre um fundo branco liso ou de uma só cor não há nada para desfocar, por isso o efeito fica invisível e o elemento parece apenas uma caixa arredondada ligeiramente tingida. Coloca sempre os elementos de glassmorphism sobre um gradiente, fotografia ou fundo com bastante detalhe visual para que o efeito se leia.

Combinar com outros efeitos CSS

Os cartões de glassmorphism costumam combinar-se com um box-shadow subtil por baixo, para dar profundidade extra. Gera aqui o CSS do vidro fosco, depois adiciona uma sombra suave com o Gerador de Box Shadow e aplica as duas declarações ao mesmo elemento.

→ Gerador de Box Shadow · Gerador de Border Radius

Perguntas frequentes

Porque é que o efeito de vidro não aparece na minha página?

O backdrop-filter desfoca o que está por trás do elemento. Se o teu elemento estiver sobre um fundo branco liso ou de uma só cor, não há nada visualmente interessante para desfocar, por isso fica apenas uma caixa ligeiramente tingida. Coloca-o sobre um gradiente, imagem ou outro fundo com detalhe para que o efeito de vidro fosco seja visível.

Preciso do prefixo -webkit-backdrop-filter?

Sim, se quiseres que o efeito seja renderizado de forma fiável no Safari. Esta ferramenta gera sempre em conjunto o backdrop-filter padrão e a versão com o prefixo -webkit-, já que o Safari historicamente precisou do prefixo para aplicar o desfoque.

Qual é a diferença entre a opacidade do fundo e o desfoque?

A opacidade do fundo controla quanto da cor de tingimento escolhida aparece em relação ao que está por trás visível sem alteração. O desfoque controla o quanto esse fundo visível é esbatido/suavizado. O glassmorphism usa os dois em conjunto — alguma transparência mais algum desfoque — em vez de apenas um deles.

Posso usar backdrop-filter em qualquer elemento?

Sim, mas só afeta o que está visualmente por trás desse elemento dentro da renderização da página, não os filhos do próprio elemento. Também tem um custo de desempenho em alguns dispositivos quando aplicado a muitos elementos ou animado com frequência, por isso é melhor usá-lo num pequeno número de superfícies de interface em destaque, como cartões, modais ou barras de navegação, em vez de em dezenas de pequenos elementos.

Porque é que o contorno mal se vê?

O contorno usado nesta ferramenta é um branco semitransparente, pensado para ser subtil — uma margem clara que ajuda o painel de vidro a destacar-se como uma superfície própria sem parecer um contorno opaco e rígido. Aumenta o controlo de opacidade do contorno se quiseres uma margem mais visível.