O backdrop-filter funciona em todos os navegadores?

É suportado pelos navegadores modernos. Em navegadores antigos, recomenda-se um fundo sólido como fallback.

Preciso de imagens para o efeito?

Não. O efeito é puro CSS, mas funciona melhor sobre fundos coloridos ou com gradiente.

O uso básico é gratuito?

Sim. A ferramenta oferece uso básico gratuito para testar o fluxo principal e obter o resultado essencial. Exportações avançadas, relatórios completos, lotes ou recursos conectados ao Studio podem exigir liberação. Assinantes pagos não passam por bloqueios de exportação quando o recurso faz parte do plano.

Preciso criar conta para ver o resultado?

O resultado principal fica disponível no fluxo público da ferramenta. Em alguns casos, como relatórios, downloads avançados, conversões extras ou kits completos, a liberação pode pedir um contato ou uma ação rápida. Essa regra evita prometer ausência de cadastro onde há lead gate.

Design Tools

Gerador de Glassmorphism

Vidro estilo Apple. Ajuste os controles e exporte CSS ou Tailwind.

Controles

Desfoque (px)

16px

Transparência (alfa)

25%

Saturação (%)

150%

Espessura da borda (px)

1px

Cor da borda

Opacidade da borda

20%

Textura de ruído / grão

Exportar

.glass {
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 1rem;
}

Título do Card de Vidro

Texto de legenda para avaliar legibilidade e contraste no efeito de vidro.

O que é glassmorphism e como fazer no CSS?

Glassmorphism é o efeito de vidro fosco: um painel semitransparente que desfoca o que está atrás (backdrop-filter: blur). É popular em cards, menus e modais. O segredo é equilibrar transparência, blur e uma borda sutil. Esta ferramenta gera o CSS (ou as classes Tailwind) prontas para colar.

A receita do glassmorphism

backdrop-filter: blur(8-16px)
Fundo semitransparente (rgba com alpha ~0.1-0.2)
Borda sutil clara (1px branco translúcido)
Precisa de um fundo colorido atrás para o efeito aparecer

AbstractOS

Use este efeito num site de verdade

Crie o site no Prisma Studio com IA e aplique o glassmorphism sem código.

Criar app com IA

Esta ferramenta foi útil?

Seja o primeiro a avaliar

Como criar um efeito glassmorphism em CSS

1
Ajuste o desfoque e a transparência
Controle blur, opacidade e cor para chegar ao efeito de vidro fosco.
2
Refine borda e sombra
Adicione borda sutil e sombra para dar profundidade ao card de vidro.
3
Copie o CSS
Copie o código com backdrop-filter pronto e aplique no seu componente.

Perguntas frequentes

O que é glassmorphism?: É um estilo de UI que simula vidro fosco usando transparência e desfoque de fundo (backdrop-filter).
O backdrop-filter funciona em todos os navegadores?: É suportado pelos navegadores modernos. Em navegadores antigos, recomenda-se um fundo sólido como fallback.
Preciso de imagens para o efeito?: Não. O efeito é puro CSS, mas funciona melhor sobre fundos coloridos ou com gradiente.
O uso básico é gratuito?: Sim. A ferramenta oferece uso básico gratuito para testar o fluxo principal e obter o resultado essencial. Exportações avançadas, relatórios completos, lotes ou recursos conectados ao Studio podem exigir liberação. Assinantes pagos não passam por bloqueios de exportação quando o recurso faz parte do plano.
Preciso criar conta para ver o resultado?: O resultado principal fica disponível no fluxo público da ferramenta. Em alguns casos, como relatórios, downloads avançados, conversões extras ou kits completos, a liberação pode pedir um contato ou uma ação rápida. Essa regra evita prometer ausência de cadastro onde há lead gate.