Gerador de Glassmorphism CSS
Crie efeitos de vidro fosco (glassmorphism) com backdrop-filter, transparência e bordas. Ajuste blur, saturação e opacidade. Veja o preview em tempo real e copie o CSS. Tudo no navegador.
O que é Glassmorphism?
Glassmorphism é um estilo visual que simula vidro fosco: fundo translúcido, leve desfoque do conteúdo atrás (backdrop-filter: blur()) e uma borda sutil. Foi popularizado pelo macOS Big Sur e Windows 11.
Funciona melhor sobre fundos coloridos ou imagens — em fundos sólidos, o efeito é quase invisível. Combine com backdrop-filter: saturate() para realçar as cores que aparecem por trás.
Compatibilidade: requer browsers modernos. Para Safari, inclua -webkit-backdrop-filter.
Crie o efeito de vidro fosco (glassmorphism)
O glassmorphism, aquele visual de vidro fosco e translúcido que a Apple e a Microsoft ajudaram a popularizar, dá um ar moderno a cartões e painéis. Pra recriá-lo no CSS você precisa juntar transparência, desfoque de fundo e bordas discretas, e é justamente isso que este gerador resolve de forma visual.
Mexa no blur (o backdrop-filter), na saturação, na opacidade e nas bordas: o efeito muda em tempo real sobre um fundo de exemplo. Quando ficar do jeito que você imaginou, um clique copia o CSS pronto, com as propriedades certas pra funcionar nos navegadores.
Roda no navegador, sem nada pra instalar. Acaba sendo um jeito rápido de aderir a uma das tendências de interface mais marcantes dos últimos tempos sem precisar decorar a sintaxe do backdrop-filter.
Perguntas frequentes
Por que o efeito some quando aplico o CSS num fundo branco?
O que exatamente entra no CSS copiado e o que fica de fora?
A cor base e a opacidade do fundo não fazem a mesma coisa?
Ferramentas Relacionadas
Gerador de Gradiente CSS
Crie gradientes lineares e radiais para CSS com prévia em tempo real. Ajuste cores, posições e ângulo. Copie o código CSS com um clique.
Gerador de Mesh Gradient
Crie mesh gradients modernos combinando vários radial-gradients. Adicione, remova e arraste pontos para compor fundos vibrantes ao estilo Stripe e Linear. Tudo no navegador.
Gerador de Botão CSS
Crie botões CSS customizados: cor, texto, padding, border-radius, sombra e hover. Veja o preview em tempo real e copie o HTML+CSS pronto para colar no projeto. Tudo no navegador.
Gerador de Sombra CSS
Crie sombras CSS (box-shadow) com prévia em tempo real. Configure múltiplas camadas de sombra, cor, desfoque, expansão e inset. Copie o código CSS.
Gerador de Neumorphism CSS
Crie efeitos Soft UI (neumorphism) com dois box-shadows complementares. Ajuste cor de base, distância, blur e tipo (extrudido, plano, pressionado). Cópia em CSS pronto. Tudo no navegador.
Calculadora de Clamp CSS
Gere valores CSS clamp() para tipografia e espaçamentos fluidos. Informe os tamanhos mínimo/máximo e as larguras de viewport — o resultado é o clamp() pronto para colar no CSS.