Gerador de Glassmorphism
Efeito de vidro fosco com backdrop-filter, transparência e bordas sutis.
Propriedades CSS utilizadas
backdrop-filter: blur()Desfoca o que está atrás do elemento (não o elemento em si), criando o efeito de vidro fosco. Precisa de um fundo com conteúdo/cor para ficar visível.
Fundo semi-transparenteUm background em rgba() com baixa opacidade deixa o desfoque de fundo visível através do elemento, completando o efeito de vidro.
Perguntas frequentes
Sim, para garantir suporte no Safari é recomendado declarar a versão com prefixo junto da padrão.
Tecnicamente sim, mas o efeito só é perceptível quando há algo com contraste ou textura atrás do elemento, como uma imagem ou gradiente.
backdrop-filter pode custar mais em elementos grandes ou muitos elementos empilhados; use com moderação em listas longas.
Ferramentas relacionadas
Gerador de Gradientes
Gradientes lineares, radiais e cônicos com múltiplos stops de cor.
Gerador de Neumorphism
Superfícies suaves com sombras duplas — o mesmo estilo usado neste site.
Gerador de Filtros CSS
Combine blur, brightness, contrast, saturate, grayscale, sepia e hue-rotate.