Gerador de Glassmorphism
Crie efeitos CSS de vidro fosco com pré-visualização em tempo real.
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
Ferramentas recomendadas
Utilitários selecionados que você pode achar úteis
Criar o efeito de vidro fosco (glassmorphism) em CSS
Visão Geral
O glassmorphism é o visual de vidro fosco — um painel translúcido e borrado que deixa o fundo aparecer suavemente, popularizado por sistemas operacionais modernos. Recriá-lo em CSS significa combinar transparência de fundo, um desfoque de fundo, uma borda sutil e uma sombra na medida certa. Este gerador deixa você ajustar cada parte com uma prévia ao vivo e copia o CSS exato, então você consegue o efeito sem tentativa e erro.
Como usar (passo a passo)
- 1
Defina transparência e desfoque
Ajuste a opacidade do fundo e o desfoque de fundo para controlar quão fosco o vidro parece.
- 2
Afine borda e sombra
Adicione uma borda clara sutil e uma sombra suave para dar ao painel sua aresta vítrea e profundidade.
- 3
Copie o CSS
Cole a regra gerada no seu elemento — garanta que fique sobre um fundo colorido ou de imagem para ver o efeito.
Como Funciona
O efeito sobrepõe algumas propriedades CSS: uma cor de fundo semitransparente, backdrop-filter: blur() para fosquear o que estiver atrás do elemento, uma borda fina e clara que capta a 'aresta' do vidro, e uma sombra suave para profundidade. Você ajusta desfoque, transparência e cor com controles enquanto uma prévia sobre um fundo mostra o resultado, e depois copia a regra gerada para sua folha de estilos.
Quando usar
Desenhar um card, navbar ou modal que flutua sobre um fundo ou imagem colorido. Dar a uma UI uma profundidade moderna e em camadas. Reproduzir o estilo de painel fosco do iOS ou Windows. Criar uma sobreposição que continua legível mostrando o conteúdo atrás. Prototipar um efeito de vidro antes de fixá-lo no código. Aprender como backdrop-filter e transparência se combinam.
Perguntas Frequentes
backdrop-filter só borra o conteúdo atrás do elemento, então precisa de algo colorido ou uma imagem atrás — sobre um fundo branco liso não há o que fosquear. Confirme também que o fundo do elemento é semitransparente, não sólido.
Notas Importantes
backdrop-filter é intensivo na GPU; muitos painéis de vidro numa página, sobretudo animados ou em rolagem, podem lentificar a renderização em aparelhos mais fracos. Use o efeito com parcimônia em elementos-chave.